z-index für Ebenen
Per Voreinstellung liegen absolut, fixed und relativ positionierte Elemente in der Reihenfolge übereinander, in der sie im Quelltext des HTML-Dokuments stehen – das zuletzt aufgeführte Element liegt oben. Oben liegende Ebenen überlagern dabei u.U. unten liegende Blöcke. Die unteren Inhalte sind dann nicht mehr sichtbar.
CSS z-index kann diese Reihenfolge ändern und z.B. ein Element, das im Quelltext vor allen anderen Elementen liegt, über die folgenden Elemente anheben.
Cyan nach ganz unten (z-index: -1)
Cyan nach unten ( z-index: 0)
Cyan zurück auf Ebene 3 (z-index: auto)
.box { position: relative }
.box div { position: absolute }
…
<div class="box">
<div style="background:beige"></div>
<div style="background:green"></div>
<div style="background:cyan"></div>
<div style="background:blue"></div>
</div>
Das Beispiel zeigt eine häufig benutzte Technik für Slideshows: Der umfassende Block ist relativ positioniert, die Slides im Container sind absolut positioniert. Da die Slides dort nicht versetzt, sondern überdeckend positioniert sind, entscheidet der z-index, welches Element im Viewport sichtbar ist.
Aber wieso verschwindet das Element mit einem negativen z-index von der Bildfläche?
Die Einstellung »Cyan nach ganz unten« mit einem negativen z-index setzt die Cyan-Box unter alle anderen Blöcke – unter die umfassende graue Box und selbst unter den Textblock dieser Seite.
Auf nicht absolut, fixed oder relativ positionierte Elemente hat z-index zwar keine Wirkung, aber für sie gilt – vereinfacht gesagt – z-index: 0 ( oder bei einem tiefschürfenden Blick What You May Not Know About the Z-Index Property).
CSS z-index Werte
- auto
- (Voreinstellung) setzt den Wert der Stapelordnung auf den Wert des Elternelements.
- number
- kann eine positive oder negative ganzzahlige Zahl sein.
z-index ist immer ein »Integer« – ganzzahlig – und kann positiv oder negativ sein. Mit negativen Werten für z-index wandert das Element unter alle Elemente ohne z-index, auch unter alle Elemente, die nicht positioniert sind.
Wie Ebenen im Illustrationsprogramm
HTML-Elemente können also drei Dimensionen aufweisen. Die x- und y-Position wird im Viewport des Browsers angezeigt, die z-Achse liegt in Richtung auf den Betrachter. Je größer der Wert der CSS-Eigenschaft z-index, desto weiter oben liegt das Element. Anders gesagt, liegen Elemente mit größeren z-index-Werten über solchen mit niedrigeren Werten.
CSS z-index bildet die z-Achse und bestimmt, welches Element über anderen Elementen liegt – ähnlich wie Ebenen in Illustrationssprogrammen (z.B. Adobe Illustrator, Photoshop oder Inkscape).
Animierte Slides mit z-index
z-index ist eine numerische Eigenschaft und lässt sich also animieren. Für eine »tabbed« Navigation oder eine Slideshow wird der z-index einer Slide erhöht, damit sie ganz nach vorn kommt.
-
Wilde Tiere fielen durch Türen, Bären entkamen den Bergen im Gallop. Keine Schwalbe sah Nester in der Nähe tiefer Grotten, aber sie betraten die Wildnis ohne Verlustängste.
-
Unterwasser blickten Algen stur zum Himmel, aber wollten der Sache nicht auf den Grund gehen. Das Kaninchen mit dem Hut blieb still, denn kein Äffchen und kein Kakadu konnte der Teekanne widerstehen.
-
Mitten unter geläuterten Perlenfischern segelten die Adler dem gleißenden Wasser entgegen und trotzten den Wolken, dem Eisregen und den Fröschen.
.tabs [id^="tab"]:checked + label {
background: white;
border-bottom: 0;
z-index:2;
}
