IE7 CSS overlay z-index

Question

Étant donné cette 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; 
}); 

... Dans IE7, lorsque la superposition est montré, il couvre correctement le contenu dans le premier containe r, mais le contenu du second module de conteneur est "visible".

Est-ce que quelqu'un d'autre a rencontré ce comportement? Et y a-t-il des façons recommandées de le résoudre?

Merci!

Answer 1

Vous devez absolument positionner div overlay pour couvrir correctement un conteneur. et vous devez disposer d'une superposition pour chaque conteneur de contenu de la façon dont vous les avez configurés.

.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

Votre superposition est à l'intérieur du premier module. Par conséquent, il ne peut pas couvrir le second module à moins que le premier module le couvre également. (Il ne peut couvrir que ce que couvre le premier module).

Vous devez le déplacer en dehors des deux modules, et peut-être ajouter position: absolute à son CSS.

Answer 3

Voir this thread. Je faisais face au même problème que vous - mais en suivant l'idée, je l'ai corrigé pour moi.

Tout ce que j'avais à faire était de spécifier des valeurs d'index z pour tous les éléments du conteneur en fonction de l'ordre d'empilement souhaité.