CODEWITHSUNDEEP
cssinternet-explorer-7overlayz-index
jerome
jerome

Reputation: 4987

IE7 CSS z-index overlay

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!

Upvotes: 3

Views: 8527

Answers (3)

miCRoSCoPiC_eaRthLinG
miCRoSCoPiC_eaRthLinG

Reputation: 2960

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.

Upvotes: 1

SLaks
SLaks

Reputation: 887807

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.

Upvotes: 1

Funky Dude
Funky Dude

Reputation: 3967

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}

Upvotes: 0

Related Questions