Question

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

我的问题是当我应用位置：固定时，横幅消失，或者当我放大FireFox时它们不能正常运行。这意味着当我放大FireFox时，横幅将与Container重叠而不是相对于容器保持不变。

就位置和缩放而言，我在这里完美地运作。 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;将横幅移出屏幕160px。左和右是相对于窗口而不是容器。

＆＃13;

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

＆＃13;

CSS在FireFox中固定位置而不在身体上重叠

1 个答案: