z-index – Stapelreihenfolge übereinander liegender Blöcke
Wenn absolut und fest positionierte Blöcke aus dem Textfluss genommen und beliebig positioniert werden, können sie übereinander liegen. Der z-index steuert, welche Elemente über anderen liegen, und erzeugt eine Stapelreihenfolge. Aber heute konkurrieren positionierte Elemente auch mit Flex- und Grid-Items.
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;
}
Elemente mit display: flex, display: grid überlappen
grid-Elemente können sich überlappen und dann übereinander liegen. Die Reihenfolge, welches Element dabei oben liegt, ist die DOM-Reihenfolge. Item B liegt also oben, weil es im DOM nach Item A kommt. Dafür ist kein z-index erforderlich.
<div class="grid"> <div class="a">Item A</div> <div class="b">Item B</div> </div>
.grid { display: grid; }
.a {
grid-area: 1 / 1;
background: yellow;
z-index: 10;
}
.b {
grid-area: 1 / 1;
background: lavender;
}
Überraschung! Grid-Items ohne position gehorchen einem z-index, obwohl sie statisch positioniert sind. Flex- und Grid-Items sind lt. Standard z-index-fähig.
Die böse Überraschung folgt sogleich: Die Grid-Items liegen jetzt beim Scrollen über dem Sticky-Header dieser Seite. Grid und Flex konkurieren mit positionierten Elementen um den z-index.
isolation: Mittel gegen z-index-Chaos
z-index wirkt nur innerhalb seines »Stacking Contexts«. Einen Stacking Context erzeugen z.B.
position: relative | absolute | fixed | sticky opacity < 1 transform filter perspective isolation: isolate
Auch wenn es den Eindruck erzeugt, dass heute position relative / absolute seltener zum Einsatz kommen, bringen moderne Layouts – z.B. Grid und Flex – Überlappung ohne absolute Positionierung mit sich. Viele Komponenten kämpfen um den z-index.
isolation: isolate ist eines der besten Werkzeuge rund um z-index.
<div class="card"> Card <div class="tooltip">Tooltip</div> </div> <div class="modal"> Modal </div>
.card {
position: relative;
background: lightblue;
}
.tooltip {
position: absolute;
top: -1rem;
right: -1rem;
z-index: 999;
background: gold;
}
.modal {
position: fixed;
z-index: 100;
background: rgba(0,0,0,0.5);
}
Der Tooltip liegt über dem Element mit der Klasse modal, obwohl das Element hinter der Card liegt. Jetzt würde das Hochzählen des z-index beginnen: z-index für modal hochdrehen. Und vielleicht entsteht dabei das nächste z-index-Chaos.
Mit isolation: isolate erzeugt .card sich einen eigenen Stacking Context und der tooltip kommt nicht mehr über das Modal hinaus. Der z-index für den Tooltip wird auf die Klasse .card beschränkt. .card wird zur nach außen geschlossenen Einheit.
