EDITED

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的内容显示在叠加层的顶部。

我无法在容器1之外移动我的叠加div，因为我正在使用CMS（DotNetNuke，如果这有帮助）。

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

有人可以帮忙吗？

Answer 1

工作Fiddle Example!

如果您将此问题的范围限制为您提供的代码，那么它的工作正常！例如，在小提琴上，您可以看到我为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;的位置。

请参阅此Fiddle to illustrate!

如果将兄弟元素移动到较低的堆栈位置，则可以使其工作。见Fiddle Example!

<强>被修改

我的答案的第一部分是根据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>

请参阅此Fiddle Example!

EDITED

因为此评论：

是的，这将是理想的答案，我会接受它，因为它回答了我的问题，但我面临的问题是来自一些动态改变其他容器的z-index的JavaScript。我无法控制，因此无法将我的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>

查看此工作Fiddle example!

Answer 2

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

如果position属性的值不是static，则称该元素定位。
CSS 2.1规范
的
〜Visual Formatting Model

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索引，则没有任何意义：

<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/

用z-index覆盖DIV

6 个答案:

解决方案

EDITED