Overlaying DIVs with z-index

css, html, overlay

Solution

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!

Problem

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?

Original source