2

我试图在我的整个页面上覆盖一个 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 设置为高于容器，但没有任何效果。

任何人都可以帮忙吗？

4

6 回答 6

7

工作小提琴示例！

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

但是，如果您正在使用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>

不能作为“整个页面”叠加使用，因为内部 divposition:fixed位于堆叠元素内，该堆叠元素的侧面（兄弟姐妹）具有其他堆叠元素，与z-index:902;.

看这个小提琴来说明！

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

已编辑

我的答案的第一部分是按照My Head Hurts的建议进行编辑的（请参阅评论），以更好地解释第一个 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>

请参阅此小提琴示例！

已编辑

因为这个评论：

是的，这将是理想的答案，我会接受它，因为它回答了我所写的问题，但我面临的问题来自一些 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>

请参阅这个工作小提琴示例！

于 2012-05-15T12:43:46.880 回答
5

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

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

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

于 2012-05-15T12:43:55.633 回答
0

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

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

于 2012-05-15T12:44:46.947 回答
0

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

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

于 2012-05-15T12:52:10.037 回答
0

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

于 2013-01-23T07:20:04.537 回答
0

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

于 2018-09-12T17:54:13.890 回答