Question

我的网页上有一个标题div，其属性为position: fixed。就在这个div之前，我有一个叠加div，我给了position: absolute, height: 100%, width: 100%。

问题是叠加div不覆盖固定宽度div（尽管如此，它覆盖了其余的内容）。如何让它覆盖整个屏幕？

顺便说一下，这与z-index无关，覆盖div实际上从固定标题结束的地方开始。

<body>
   <div id="overlay">
       <div id="dialog">
          <span><span>
          <button id="ok"></button>
       </div>
   </div>

   <div id="header-wrapper">
      <div id="header">
        ....
      </div>
   </div>

    ....
</body>

Answer 1

您的叠加层应该是固定的叠加层：100％宽度和高度。在此之上的任何div都可以是固定的或绝对定位的。小心在平板电脑和手机使用的网页上使用它，它的工作可怕。

Answer 2

也许我错了，但试试这个解决方案：

#header-wrapper{
    width:100%;
    display: inherit;
}
#overlay{

    position: fixed;
    height: 100%;
    width: 100%;
}

http://jsfiddle.net/silentgrave/8uwHB/

Answer 3

使用此代码

#overlay
{ 
position: fixed;
left: 0px; 
top: 0px; 
width: 100%; 
z-index: 1000000000;
}

完美无缺

位置绝对位于固定位置之上

3 个答案: