IE7 z-index-Bug bei absoluten Elementen innerhalb von relativ positionierten Elementen
Problem
In standardkonformen Browsern hat ein absolut positioniertes Element automatisch einen höheren z-index als nicht absolut positionierte Elemente. Ist aber im IE7 ein Element absolut innerhalb eines relativ positionierten Elementes positioniert, überlagern alle in der HTML-Struktur nachfolgenden Elemente das absolut positionierte Element. Auch das Setzen eines z-index für das absolut positionierte Element hat keine Auswirkung.
Angenommen man hat eine Liste. Bei :hover über ein Listenelement soll sich in der Nähe des Listenelements ein Layer öffnen. Da der Layer den nachfolgenden Inhalt nicht verschieben soll, ist der Layer mit position: absolute positioniert. Da der Layer auch an der richtigen Stelle (beim zugehörigen Listenelement) angezeigt werden soll, ist das <li> mit position: relative positioniert. Im IE7 überlagern nun die nachfolgenden <li>s den Layer. Selbst wenn man dem Layer z-index: 9999 gibt, ändert das nichts.
li {
position: relative;
}
li div {
display: none;
}
li:hover div {
background-color: lightgrey;
color: blue;
display: block;
left: 10px;
padding: 10px;
position: absolute;
top: 10px;
z-index: 9999; /* hat keine Auswirkung */
}
Lösung
Das relativ positionierte Element muss einen höheren z-index haben, als die in der HTML-Struktur nachfolgenden Elemente auf gleicher Ebene. Im Beispiel muss das relative positionierte <li> also z. B. z-index: 1 haben, während die benachbarten <li>s z-index: 0 haben. Wenn potentiell jedes der <li>s auch einen eigenen Layer haben kann, empfiehlt es sich, nur den z-index des gehoverten <li>s zu erhöhen.
li {
position: relative;
z-index: 0; /* muss niedriger sein als bei :hover */
}
li:hover {
z-index: 1; /* muss höher sein als im Normalzustand */
}
li div {
display: none;
}
li:hover div {
background-color: lightgrey;
color: blue;
display: block;
left: 10px;
padding: 10px;
position: absolute;
top: 10px;
}
