用z-index覆盖DIV

Question

我试图在整个页面上叠加一个div以显示弹出窗口。 问题是，它不会覆盖整个页面。 以下是代码的近似值：

<div style="z-index:902;">
    <div style="position: fixed; width: 100%; height: 100%; left: 0; top: 0;">
        Overlay
    </div>
    Contents of container 1
</div>
<div style="z-index:902;">
    Contents of container 2
</div>
<div style="z-index:902;">
    Contents of container 3
</div>

叠加div显示在容器1的顶部，但容器2和3的内容显示在叠加层的顶部。

我不能将我的叠加div移动到容器1之外，因为我正在使用CMS（DotNetNuke如果有帮助的话）。

我已经尝试将叠加层的z-index设置为高于容器，但没有任何工作。

有人可以帮忙吗？

Answer 1

工作小提琴示例！

如果您将此问题的范围限制为您提供的代码，它工作得很好！ 例如，在小提琴上，您可以看到我为position:fixed设置了背景颜色position:fixed div以说明解决方案正在运行。

但是 ，如果您使用z-index ，则可以安全地假设您的z-index元素已应用某个position 。

考虑到这一点，这部分：

<div style="z-index:902;">
    <div style="position: fixed; width: 100%; height: 100%; left: 0; top: 0;">
        Overlay
    </div>
    Contents of container 1
</div>

由于具有position:fixed的内部div在一侧具有其他堆叠元素的堆叠元素（兄弟姐妹）内，在具有z-index:902;的相同堆栈位置上， 因此不能用作“整页”覆盖z-index:902; 。

看这个小提琴来说明！

如果将兄弟元素移动到较低的堆栈位置，则可以使其工作。 看到这个小提琴示例！

编辑

我的答案的第一部分是按照My Head Hurts （见评论）的建议编辑的，以便更好地解释第一个小提琴的作用，因为OP将问题留在了猜测位置！ 在这个答案中没有对提出和批准的两个解决方案进行任何更改！

---

一个解法

将叠加层置于所有其他div之外，但这取决于您的目标：

 <div style="z-index:902;"> Contents of container 1 </div> <div style="z-index:902;"> Contents of container 2 </div> <div style="z-index:902;"> Contents of container 3 </div> <div style="position:fixed; z-index:10000; left:0; top:0; right:0; bottom:0; background:#ccc;"> Overlay </div> 

看到这个小提琴示例！

---

EDITED

因为这个评论：

是的，这将是理想的答案，我会接受它，因为它回答我的问题，但我遇到的问题是一些JavaScript动态改变了我无法控制的其他容器的z索引不可能把我的div放在他们之上。

假设你可以在container 1放置任何你想要的东西，并假设你正在使用或者可以使用jQuery，你可以这样做来解决问题：

 <div style="z-index:902;"> <div class="placeOutside" style="position:fixed; z-index:903; right:0; bottom:0; left:0; top:0; background:#ccc;"> Overlay </div> <script type="text/javascript"> jQuery(document).ready(function($) { $('.placeOutside').appendTo('body'); }); </script> Contents of container 1 </div> <div style="z-index:902;"> Contents of container 2 </div> <div style="z-index:902;"> Contents of container 3 </div> 

看到这个工作小提琴的例子！

Answer 2

z-index仅适用于定位元素 （例如position:absolute; , position:relative; ， position:fixed; ）。

如果元素的position属性具有static值以外的值，则称该元素被定位 。

~CSS 2.1规范的可视化格式模型

Answer 3

您已将叠加层的宽度和高度设置为100％，并且由于它是容器1的直接后代，因此其宽度将计算为容器1的宽度和高度的100％，从而解释您的问题。

至于解决方案，您可能应该在显示之前将覆盖的宽度和高度设置为JavaScript中浏览器窗口大小的绝对像素值。

Answer 4

这段代码在firefox中对我有用：

<div style="z-index:1;">
    <div style="position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index:901;">
        Overlay
    </div>
    Contents of container 1
</div>
<div style="z-index:1;">
    Contents of container 2
</div>
<div style="z-index:1;">
    Contents of container 3
</div>

所以试一试，看看它是否适合你。

Answer 5

这是我的解决方案......想象一下两个兄弟姐妹。 #in-front需要在#behind之上休息。

<div id="behind"></div>
<div id="in-front"></div>

不要让他们成为兄弟姐妹，而是将第一个div包裹在包装器中并将其定位设置为固定。

<div id="wrapper" style="position:fixed; width:100%; top:0; left:0;">
    <div id="behind"></div>
</div>
<div id="in-front"></div>

#behind div现在可以根据需要定位或居中。 看看这个jsfiddle的例子。 注意它们如何协同工作而没有负边距！

Answer 6

如果我混合位置相对和绝对宽度z-index这没有意义：

<div style=" Position: fixed ;  z-index:902; width:100%; heigth:100%;background:#F00;">
    Contents of container 2
</div>
<div style="z-index:1; position:relative">
    <div style=" z-index:903; Position: fixed ; left: 0; top: 0;background:#ccc;">
        Overlay
    </div>
</div>

http://jsfiddle.net/vLp0am43/