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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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 */
}
Im IE7 ist liegt der Layer unter den nachfolgenden <li>s
Im IE7 ist liegt der Layer unter den nachfolgenden <li>s

Demo ansehen

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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;
}
Der Layer liegt nun über den nachfolgenden <li>s
Der Layer liegt nun über den nachfolgenden <li>s

Demo ansehen