Overlaying DIVs with z-index

问题:

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?

回答1:

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!

回答2:

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

An element is said to be positioned if its position property has a value other than static.

~ Visual Formatting Model of CSS 2.1 Specification

回答3:

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.

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.

回答4:

This code worked for me in 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.

回答5:

Here is my solution... Imagine two sibling divs. #in-front needs to rest on top of #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 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 jsfiddle for an example. Notice how they work together with no negative margins!

回答6:

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

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