Obtient l'élément positionné absolu sur un élément relatif. (IE)

Question

Veuillez vous reporter à test site. Avoir des problèmes dans IE (6 & 7) obtenir un élément positionné absolu pour apparaître sur un qui est relativement positionné.

La case jaune (absolue) doit apparaître au-dessus de la case bleue (relative). J'ai essayé de donner au bleu un indice z plus bas que jaune, mais cela ne semblait pas fonctionner.

Toute aide serait géniale.

Answer 1

Vous devez définir l'index z sur la boîte orange, puisque c'est celle qui contient la boîte jaune. Dans IE6/7, la boîte jaune aura seulement un indice z plus élevé que les autres éléments à l'intérieur du conteneur orange.

#orange { 
    position: relative; 
    z-index: 1; 
    background-color: orange; 
} 
#blue { 
    background-color:blue; 
    height:100px; 
    overflow:hidden; 
    position:relative; 
    width:300px; 
} 

Answer 2

z-index Spécifiez pour la boîte bleue explicitement:

#yellow { 
background-color: yellow; 
width: 100px; 
height: 150px; 
position: absolute; 
z-index: 200; 
} 

#blue { 
width: 300px; 
height: 100px; 
overflow: hidden; 
background-color: blue; 
position: relative; 
z-index: 100; 
} 

Mieux encore, préciser z-index pour les trois cases pour éliminer toute erreur d'interprétation par les navigateurs.