IE7 CSS z-index Overlay

Question

diese Situation gegeben:

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, wenn das Overlay gezeigt wird, deckt es den Inhalt des ersten Containers korrekt ab r Modul, aber der Inhalt im zweiten Containermodul zeigt "durch".

Hat jemand anderes dieses Verhalten festgestellt? Und gibt es empfohlene Lösungswege?

Danke!

Answer 1

Sie müssen Overlay Div unbedingt positionieren, um einen Container korrekt abzudecken. und Sie müssen ein Overlay für jeden Inhaltscontainer haben, so wie Sie sie eingerichtet haben.

.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

Ihr Overlay befindet sich im ersten Modul.

Daher kann das zweite Modul nicht abgedeckt werden, es sei denn, das erste Modul deckt es auch ab. (Es kann nur abdecken, was das erste Modul abdeckt).

Sie müssen es außerhalb beider Module verschieben und vielleicht position: absolute zu seinem CSS hinzufügen.

Answer 3

Siehe this thread. Ich stand vor dem gleichen Problem wie du - aber nach der Idee habe ich es für mich gelöst.

Alles, was ich tun musste, war die Angabe von Z-Index-Werten für alle Containerelemente entsprechend der gewünschten Stapelreihenfolge.