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

不能作为"整页"叠加层工作,因为内部div position:fixed在一个堆叠元素内部,在侧面(兄弟姐妹)上有其他堆叠元素,在同一堆栈位置上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;).

如果元素的属性具有除了之外的值,则称该元素被定位.positionstatic

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