使用z-index重叠DIV [英] Overlaying DIVs with z-index

问题描述

我想在整个页面上重叠一个div，以显示一个弹出式窗口。问题是，它不会覆盖整个页面。这里是代码的近似：

 < div style =z-index：902;> 
< div style =position：fixed; width：100％; height：100％; left：0; top：0;> 
 Overlay 
< / div> 
容器内容1 
< / div> 
< div style =z-index：902;> 
容器内容2 
< / div> 
< div style =z-index：902;> 
容器内容3 
< / div> 
  

重叠div出现在容器1的顶部，但容器2和3的内容显示在顶部

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

我已经尝试将叠加层的z-index设置为高于容器，但没有什么工作。

任何人都可以帮助？ / p>

解决方案

工作小提琴示例！

如果您将此问题的范围限制为您提供的代码，那么它可以正常工作！例如，在The Fiddle上，您可以看到我将位置：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> 
容器内容1 
< / div> 
  

无法工作 position：fixed 位于一个堆叠元素中，在堆叠的元素（siblings）上具有其他堆叠元素，在 z-index：902 ; 。

查看此小提示来说明！

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

已编辑

我的回答的第一部分是按照我的头痛（见评论），更好地解释第一个小提琴的工作原因，因为OP放置的问题离开地方的猜测！对此提供的两个解决方案没有进行任何更改，并在此答案中批准！

---

h2>解决方案会将重叠放置在所有其他div之外，但这取决于您的目标：

  ; div style =z-index：902;> 
容器内容1 
< / div> 
< div style =z-index：902;> 
容器内容2 
< / div> 
< div style =z-index：902;> 
容器内容3 
< / div> 
< div style =position：fixed; z-index：10000; left：0; top：0; right：0; bottom：0; background：#ccc;> 
 Overlay 
< / div> 
  

查看此 Fiddle Example！

---

EDITED

因为此评论：

是的，这将是理想的答案，它回答了我的问题，但我面临的问题是从一些JavaScript动态地改变其他容器的z-index，我无法控制，使它不可能把我的div在所有。 em>

假设您可以在 container 1 假设你使用或可以使用jQuery，你可以这样做来解决问题：

 < div style = -index：902;> 
< div class =placeOutsidestyle =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> 
容器内容1 
< / div> 
< div style =z-index：902;> 
容器的内容2 
< / div> 
< div style =z-index：902;> 
容器内容3 
< / div> 
  

查看此工作小提示示例！

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

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

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

Can anyone help?

解决方案

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:fixed div as to illustrate that the solution is working.

However, if you are using z-index, is safe to assume that your elements with z-index have some position applied.

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 work as an "entire page" overlay since the inner div with position:fixed is inside a stacked element that has other stacked elements on the side (siblings), on the same stack position with 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!

---

A solution

would be placing the overlay outside all other divs, but this depends on your goal:

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

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

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

这篇关于使用z-index重叠DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！