【问题标题】：Overlaying DIVs with z-index使用 z-index 覆盖 DIV
【发布时间】：2018-09-13 01:54:13
【问题描述】：

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

overlay div 出现在容器 1 的顶部，但容器 2 和 3 的内容出现在覆盖层的顶部。

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

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

谁能帮忙？

【问题讨论】：

你必须用 div 来做弹出窗口，还是可以做一个模态窗口之类的东西？
我认为您在这个问题中没有包含足够的信息。除非其他 div 元素是 positioned，否则上面的代码将起作用。如果他们是positioned，那么他们需要吗？如果他们这样做，那么您需要将 div 包含 'overlay' div 的 z-index 设置为高于其他 div - 即 z-index: 903
@SomeKittens 有时最好的答案是尝试不同的方法 - 我已经摆脱了覆盖，并决定只在纯 HTML 页面的新窗口中打开内容。
@MyHeadHurts 我确实尝试将叠加层 z-index 设置得更高，但结果发现有一些 javascript 正在执行更改其他容器的 z-index。
@c.cam108 - 您需要设置 z-index 的不是“覆盖”，而是“覆盖”的父 div。如果您给父 div 一个 id 并添加属性 z-index: 903!important 那么这将解决问题。从纯粹客观的意义上讲 - 公认的答案（如果您指的是第一部分）永远不会奏效。

标签： css html overlay

【解决方案1】：

工作Fiddle Example!

如果您将此问题的范围限制在您提供的代码中，它就可以正常工作！例如，在 Fiddle 上，您可以看到我为 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（参见 cmets）的建议进行编辑的，以更好地解释第一个 Fiddle 有效，因为 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!

已编辑

因为这条评论：

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

【讨论】：

是的，这将是理想的答案，我会接受它，因为它回答了我所写的问题，但我面临的问题来自一些动态改变另一个 z-index 的 Javascript我无法控制的容器，因此无法将我的 div 放在所有容器之上。
假设@c.cam108 正在使用positioned 元素，那么您的答案的第一部分不正确并且不起作用：jsfiddle.net/H5NB8/3 但是，第二个选项是合理的，但@c.cam108 已经表示他不能这样做
@My Head Hurts，正如 c.cam108 所说，第一个解决方案解决了他写的问题！但是我确实想到了您的警报，因此是第二种解决方案！ :) 我已经编辑了我的答案，用一些 Jquery 放置了第三个选项！
@Zuul 第二个解决方案完美运行！非常感谢。
@我的头疼，完成了！很高兴看到 stackoverflow 用户激发了我的连贯性！许多tks！

【解决方案2】：

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

如果元素的position 属性的值不是static，则称该元素为已定位。

~Visual Formatting Model 的 CSS 2.1 规范

【讨论】：

请参阅与z-index 和position:fixed 相关的this example。

【解决方案3】：

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

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

【讨论】：

【解决方案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>

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

【讨论】：

【解决方案5】：

这是我的解决方案...想象一下两个兄弟 div。 #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 为例。请注意它们是如何在没有负边距的情况下协同工作的！

【讨论】：

【解决方案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/

【讨论】：