Firefox 中的 CSS 固定位置而不在主体上重叠

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 像素。 Left 和 Right 是相对于窗口而不是容器。

  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;
  }