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 displayed, it correctly covers the contents in the first container module, but the contents in the second container module “show”.

Has anyone else encountered this behavior? And are there any recommended ways to solve it?

Thanks!

Answer 1

Your overlay is inside the first module.

Therefore, it cannot cover the second module if the first module has not closed it. (It can only cover what the first module covers).

, , position: absolute CSS.

Answer 2

. . , , , , .

, , z-index .

Answer 3

you need to completely position the overlay div in order to properly cover the container. and you need to have an overlay for each content container as you configured them.

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