CSS 固定在 FireFox 中的位置，不与正文重叠

Question

我正在尝试在我的网站周围放置两个 DIV 容器。我希望这些 DIV 容器相对于容器保持在屏幕顶部的固定位置。

我的问题是当我应用 position:fixed 时，横幅要么消失，要么当我在 FireFox 上放大时它们无法正常运行。这意味着当我放大 FireFox 时，横幅将与容器重叠，而不是相对于容器。

就位置和缩放而言，我这里的一切都完美无缺。 http://kiny.linkedupradio.com/test.html

<style>
  body { margin: 0px }

  div#banner1,div#banner2 {
    position:absolute;
    top:0px;  /* DISTANCE FROM TOP OF WINDOW */
   }
  div#banner1 {
    left:-160px;   /* FIXES BANNER TO LEFT SIDE OF WINDOW */
   }
  div#banner2 {
    right:-160px;   /* FIXES BANNER TO RIGHT SIDE OF WINDOW */ 
   }
  .container {
     position:relative;
     width:1000px;
     margin:auto;
  }
</style>

<div id="banner1"><img src="/images/160x600.png"></div>
<div id="banner2"><img src="/images/160x600.png"></div>

<table cellpadding="0" cellspcing="0" border="0" width="990" bgcolor="#999999">
<tr>
   <td height="2000" valign="top" align="center">Website Goes Here</td>
</tr>
</table>

我正在寻求有关如何将它们固定到屏幕顶部的帮助。

谢谢！

Answer 1

需要将左右位置替换为 margin-left 和 margin-right 才能使用固定定位。

使用你原来的左边：-160px；将横幅移出屏幕 160 像素。左和右是相对于 window 而不是容器。

  body { margin: 0px }

  div#banner1,div#banner2 {
    position:fixed;
    top:0px;  /* DISTANCE FROM TOP OF WINDOW */
   }
  div#banner1 {
    margin-left:-160px;   /* you need to position left and right with margins for this to work */
   }
  div#banner2 {
    margin-left: 1000px;  
   }
  .container {
     position:relative;
     width:1000px;
     margin:auto;
  }

CSS 固定在 FireFox 中的位置，不与正文重叠

CSS Fixed Position in FireFox without overlapping on body

html

css

firefox

position

fixed