Css 用z索引覆盖div

我试图在整个页面上覆盖一个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>

覆盖层
容器1的内容物
容器2的内容物
容器3的内容物

覆盖div显示在容器1的顶部，但容器2和3的内容显示在覆盖的顶部

我无法将覆盖div移到容器1之外，因为我使用的是CMS（DotNetNuke，如果有帮助的话）

我尝试将覆盖层的z索引设置为高于容器，但没有任何效果

有人能帮忙吗？

正在工作

如果您将这个问题的范围限制在您所展示的代码上，那么它就可以正常工作了！e、 例如，在小提琴上，您可以看到我在

位置：fixed

div

上放置了一个背景色，以说明解决方案正在工作

但是如果您使用的是

z-index

，则可以安全地假设使用

z-index

的元素应用了一些

位置

考虑到这一点，本部分：

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

看到这个了吗


编辑
因为这个评论：

是的，这将是理想的答案，我会接受它，因为它以书面形式回答了我的问题，但我所面临的问题来自于一些JavaScript，它动态地更改了其他容器的z索引，我无法控制这些容器，使我无法将div放在它们之上

假设您可以在容器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>

覆盖层
jQuery（文档）.ready（函数（$）{
$（'.placeOutside'）.appendTo（'body'）；
});
容器1的内容物
容器2的内容物
容器3的内容物

请参阅此操作

仅适用于定位元素（例如

位置：绝对；

，

位置：相对；

和

位置：固定；

）

如果元素的

位置

属性的值不是

静态

，则称该元素已定位

CSS 2.1规范的应用

---

您已将覆盖的宽度和高度设置为100%，由于它是容器1的直接后代，因此其宽度将计算为容器1的宽度和高度的100%，从而解释了您的问题

---

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

这段代码在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>

覆盖层
容器1的内容物
容器2的内容物
容器3的内容物

---

因此，请尝试一下，看看它是否适合您。

这是我的解决方案。。。想象两个兄弟姐妹#前面需要放在后面的上面

与其让它们成为兄弟，不如将第一个div包装在包装器中，并将其定位设置为fixed

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

---

#behind div现在可以随心所欲地定位或居中。看看这个例子。注意它们是如何在没有负边距的情况下协同工作的

如果我混合位置相对宽度和绝对宽度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>

容器2的内容物
覆盖层

---

您是否必须使用div来显示弹出窗口，或者是否可以执行类似于模态窗口的操作？我认为您在这个问题中没有包含足够的信息。除非其他div元素已定位，否则上述代码将正常工作。如果它们已定位，那么它们是否需要定位？如果是的话，然后，您需要将包含“overlay”div的div的

z-index

设置得比其他div高一些-即

z-index:903

@SomeKittens有时最好的答案是尝试另一种方法-我已经去掉了覆盖，决定在普通HTML页面的新窗口中打开内容。@MyHeadhaths我确实尝试过设置覆盖z-index更高，但事实证明有一些javascript正在执行更改其他容器的z-index.@c.cam108-您需要设置z-index的不是“覆盖”，而是“覆盖”的父div。如果给父div一个id并添加属性

z-index:903！重要信息

这样可以解决问题。从纯粹客观的意义上讲，被接受的答案（如果你指的是第一部分）永远不会起作用。请参阅与

z-index

和

position:fixed

相关的内容。是的，这将是理想的答案，我会接受它，因为它回答了我的书面问题，但我所面临的问题来自于一些Javascript，它动态地改变了我无法控制的其他容器的z索引，使得我无法将div放在它们上面。假设@c.cam108使用的是

定位的
元素，那么您的答案的第一部分是不正确的，不会起作用：但是，第二种选择是合理的，但@c.cam108已经声明他不能这样做that@My头部受伤，正如c.cam108所说，第一个解决方案解决了他的问题！但我确实想到了你的警告，因此我想到了第二个解决方案！：）我已经编辑了我的答案，用Jquery放置了第三个选项@Zuul第二种解决方案非常有效！非常感谢。@我的头很痛，做完了，做完了！很高兴看到stackoverflow用户激发了我的一致性！很多TK！
<div id="wrapper" style="position:fixed; width:100%; top:0; left:0;">
    <div id="behind"></div>
</div>
<div id="in-front"></div>

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