Html 用 z-index 覆盖 DIV

Overlaying DIVs with z-index

提问by colincameron

I am trying to overlay a div over my entire page to show a pop-up. The problem is, it won't overlay over the entire page. Here is an approximation of the code:

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

The overlay div appears on top of container 1, but the contents of container 2 and 3 appear on top of the overlay.

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

I cannot move my overlay div outside of the container 1, as I am using a CMS (DotNetNuke if that helps).

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

I have tried setting the z-index of my overlay higher than the containers, but nothing is working.

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

Can anyone help?

任何人都可以帮忙吗？

回答by Zuul

Working Fiddle Example!

工作小提琴示例！

If you limit the scope of this problem to the code that you've presented, it is working just fine! e.g., On the Fiddle you can see that I placed a background color to the position:fixeddivas to illustrate that the solution is working.

如果您将此问题的范围限制在您提供的代码中，它就可以正常工作！例如，在 Fiddle 上，您可以看到我position:fixeddiv为 as放置了一个背景色，以说明该解决方案正在起作用。

However, if you are using z-index, is safe to assume that your elements with z-indexhave some positionapplied.

但是，如果您正在使用z-index，可以安全地假设您的元素z-index已position应用了一些。

Taking this into consideration, this part:

考虑到这一点，这部分：

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

cannot workas an "entire page" overlay since the inner div with position:fixedis inside a stacked element that has other stacked elements on the side (siblings), on the same stack position with z-index:902;.

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

See this Fiddle to illustrate!

看到这个小提琴来说明！

If you move the siblings elements to a lower stack position, you can make it work. See this Fiddle Example!

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

Edited

This first part of my answer was edited as advised by My Head Hurts(see comments), to better explain that the first Fiddle works because the OP placed the question leaving place to guesses! No changes were made to the two solutions presented and approved at this answer!

已编辑

我的答案的第一部分按照My Head Hurts 的建议进行了编辑（见评论），以更好地解释第一个 Fiddle 的工作原理，因为 OP 将问题放在了猜测的位置！对此答案中提出和批准的两个解决方案没有进行任何更改！

---

---

A solution

一个办法

会将叠加层放置在所有其他 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>

See this Fiddle Example!

看到这个小提琴示例！

---

---

EDITED

已编辑

because of this comment:

因为这个评论：

Yes this would be the ideal answer, and I will accept it as it answers my question as written, but the problem I was facing was from some JavaScript that was dynamically changing the z-index of the other containers that I couldn't control making it impossible to place my div on top of them all.

是的，这将是理想的答案，我会接受它，因为它回答了我所写的问题，但我面临的问题来自一些 JavaScript，它动态地改变了我无法控制的其他容器的 z-index不可能将我的 div 放在所有这些之上。

Assuming that you canplace whatever you wish inside container 1, and assuming that you are using or can use jQuery, you can do this to solve the problem:

假设你可以在里面放任何你想要的东西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>

See this working Fiddle example!

看到这个工作小提琴示例！

回答by Etienne Dupuis

z-indexonly works with positioned elements(e.g. position:absolute;, position:relative;, and position:fixed;).

z-index仅与工作定位的元素（例如position:absolute;，position:relative;和position:fixed;）。

An element is said to be positionedif its positionproperty has a value other than static.

~ Visual Formatting Modelof CSS 2.1 Specification

如果元素的属性具有除 之外的值，则称该元素已定位。positionstatic

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

回答by Andreas Eriksson

You have given your overlay a width and height of 100%, and since it is a direct descendant of container 1, its width will be calculated to be 100% of the width and height of container 1, thus explaining your problem.

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

As for a solution, you should probably set the width and height of the overlay to an absolute pixel value for the size of the browser window in JavaScript, prior to showing it.

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

回答by Frederik Nielsen

This code worked for me in firefox:

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

So try it out and see if it works for you.

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

回答by internet-nico

Here is my solution... Imagine two sibling divs. #in-front needs to rest on top of #behind.

这是我的解决方案...想象两个兄弟 div。#in-front 需要放在 #behind 之上。

<div id="behind"></div>
<div id="in-front"></div>

Instead of having them be siblings, wrap the first div inside a wrapper and set it's positioning to fixed.

不要让它们成为兄弟姐妹，而是将第一个 div 包裹在包装器中并将其定位设置为固定。

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

The #behind div can now position or center itself however it wants. Look at this jsfiddlefor an example. Notice how they work together with no negative margins!

#behind div 现在可以随意定位或居中。以这个jsfiddle为例。注意它们是如何协同工作的，没有负边距！

回答by Andre Amado

if i mix position relative and absolute width z-index this make no sense:

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

http://jsfiddle.net/vLp0am43/