IE -Trouble

#eins hat den z-index: 1, #zwei den z-index: 2 und #einsa den z-index: 3. Die entscheidende Frage: Welches Element steht oben? Geht man nur von den Werten für z-index aus, scheint die Antwort klar: Das Element mit dem höchsten z-index, also #einsa. Wenn Sie das Beispiel im Browser betrachten, ist jedoch #zwei das oberste Element.

Schuld daran ist der Stapelkontext. Denn z-index etabliert bei #eins einen neuen Stapelkontext. Und das bedeutet, dass das Kindelement #einsa in diesem neuen Stapelkontext und nicht mehr in dem ursprünglichen steht. #einsa und #zwei befinden sich in unterschiedlichen Stapelkontexten und können deswegen über z-index nicht zueinander angeordnet werden. Die Angabe von z-index: 3 bei #einsa hätte nur Auswirkungen in Bezug auf weitere Kindelemente, die sich innerhalb von #eins befinden.Wenn Sie die Zeichnungsreihenfolge verändern wollen, können Sie dem Elternelement von #einsa, also #eins, einen höheren z- index geben. Dann wird #eins samt #einsa oberhalb von #zwei dargestellt. Denn #eins und #zwei stehen im globalen Stapelkontext und können über z-index zueinander angeordnet werden.

Bemühen wir noch einmal das Bild der transparenten Folien: Sie können sich den Stapelkontext wie eine transparente Mappe für die transparenten Folien vorstellen. Die Folien innerhalb der Mappe sind die Nachfahrenelemente, die wiederum über z-index zueinander angeordnet werden. Aber eine Folie kann nicht die Mappe verlassen, in der sie steckt.

IE -Trouble

Soweit funktionieren die Beispiele auch beim Internet Explorer und er zeigt keine abweichende Darstellung. Anders jedoch im folgenden Beispiel, wo ein Bug im Internet Explorer 6 und 7 zu beobachten ist: Er erzeugt nämlich bei positionierten Elementen auch ohne Angabe von z-index einen neuen Stapelkontext. Wieder haben wir drei Elemente #eins, #einsa und #zwei, wobei #einsa innerhalb von #eins steht.

<div id="eins">#eins<div id="einsa">#einsa</div></div><div id="zwei">#zwei</div>

Alle Elemente werden positioniert, aber nur zwei Elemente erhalten einen z-index, nämlich #zwei und #einsa:

#eins {
position: relative;
width: 250px;
}
#zwei {
margin-top: -40px;
margin-left: 40px;
position: relative;
z-index: 1;
}
#einsa {
position: relative;
z-index: 2;
}

Link-Tipps

Z-index in der CSS 2.1-Spezifikation: www.w3.org/TR/CSS2/visuren.html#z-index Genaueres zum Stapelkontext: www.w3.org/TR/CSS2/zindex.html Problem mit z-index im Internet Explorer: www.quirksmode.org/bugreports/archives/2006/01/Explorer_z_index_bug.html

Was ist die korrekte Darstellung? Das Element #eins erhält keinen z-index, erzeugt also keinen neuen Stapelkontext. Damit befinden sich #zwei und #einsa im selben Stapelkontext und #einsa mit dem höheren z-index wird weiter oben dargestellt.Genauso interpretieren es Firefox, IE 8 oder ähnliche standardkonforme Browser. Nur nicht der Internet Explorer 6 oder 7. Er stellt das Element #zwei am weitesten oben dar. Der Grund dafür: Er behandelt das Element #eins so, als hätte es z-index: 0. Und damit wird #einsa in Bezug auf #eins angeordnet und da #eins hinter #zwei liegt, wird #einsa ebenfalls hinter #zwei dargestellt.Das Problem bei IE 6 und 7 ist, dass positionierte Elemente fälschlicherweise automatisch einen neuen Stapelkontext generieren, sofern sie hasLayout haben. hasLayout ist eine proprietäre implizite Eigenschaft, die Elemente etwa dann erhalten, wenn man ihnen eine Breite oder eine Höhe zuweist.

Lösungen

Für das Problem gibt zwei Lösungen:

1. Sie verhindern den Auslöser des irregulären Stapelkontexts im IE6/7. In unserem Beispiel könnten Sie bei #eins entweder die Breitenangabe oder die Angabe position: relative entfernen. Prinzipiell sollten Sie positionierten Elementen jedoch eine Breite zuweisen, sodass sich diese Lösung nur in wenigen Fällen anbietet.
2. Sie geben dem Elternelement (hier #eins) einen passenden z-index. Damit wird #eins samt Kindelementen oberhalb von #zwei dargestellt.

Welche der beiden Möglichkeiten Sie wählen, sollte vom Kontext und den Erfordernissen Ihres Layouts abhängen. Entscheidend ist, dass beide Lösungen zu einer konsistenten Darstellung über Browsergrenzen hinweg führen.