IE7 CSS z-index overlay

Question

Given this situation:

HTML

<div class="container-module">
    Some content.
    <a id="show-overlay" href="#">Show overlay</a>
    <div id="overlay">
        Overlay content.
    </div>
</div>
<div class="container-module">
    Some content.
</div>

CSS

.container-module { height: 50px; z-index: 1; }
.overlay { background: white; display: none; height: 200px; z-index: 10; }

JS

getElementById("show-overlay").onclick( function(){
    getElementById("overlay").style.display = "block";
    return false;
});

...In IE7, when the overlay is shown, it is correctly covering the content in the first container module, but the content in the second container module is "showing through".

Has anyone else encountered this behavior? And are there any recommended ways of solving it?

Thanks!

Answer 1

you need to absolutely position overlay div to correctly cover a container. and you need to have an overlay for each content container the way you have them set up.

.container-module { height: 50px; z-index: 1; position:relative; }
.overlay { background: white; display: none; height: 200px; z-index: 10; position:absolute;top:0;left:0}

Answer 2

Your overlay is inside the first module.

Therefore, it cannot cover the second module unless the first module also covers it. (It can only cover what the first module covers).

You need to move it outside both modules, and perhaps add position: absolute to its CSS.

Answer 3

See this thread. I was facing the same problem as you - but following the idea there fixed it for me.

All I had to do was specify z-index values for all the container elements according to the desired stacking order.