CSS/Tutorials/Ausrichtung/z-index
Die Eigenschaft z-index gibt an, in welcher Reihenfolge Elemente auf dem Ausgabemedium von hinten nach vorne angeordnet werden. Das ist von Bedeutung, wenn die Elemente sich überlappen. Elemente mit einem größeren z-index liegen dabei näher am Betrachter und können Elemente mit kleinerem z-index überlagern. Der Wert des z-index ist eine ganze Zahl und kann negativ und positiv sein.
Das z-index-Attribut kann folgende Werte besitzen:
-
auto, das Element wird behandelt, als hätte es den z-index Wert 0. Es bildet aber keinen neuen Stapelkontext. - Eine ganze Zahl, das Element wird wie oben beschrieben positioniert. Eine größere Zahl bedeutet näher am Betrachter.
-
inherit, z-index des Elternelements.
Wird z-index für ein Element nicht explizit gesetzt, ist der Standard-Wert auto. Eine Vererbung des z-index des Elternelements muss explizit mit z-index:inherit ausgelöst werden.
Wenn sich zwei Elemente mit gleichem z-index überlappen, dann ist das Element weiter vorn, das im HTML Quelltext später definiert wurde. Das ist allerdings nicht immer so und wird im folgenden Abschnitt genauer beschrieben.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>z-index</title>
<style>
main {
position: relative;
}
aside {
position: absolute;
padding: 1.5em;
}
#element1 {
background-color: rgb(128 128 128 / .6);
left: 2em;
padding-bottom: 5em;
top: 5em;
z-index: 2;
}
#element2 {
background-color: rgb(0 0 255 / .4);
left: 4em;
top: 8em;
z-index: 9;
}
#element3 {
background-color: rgb(255 215 0 / .8);
left: 6em;
top: 11em;
z-index: 0;
}
#element4 {
background-color: rgb(128 0 0 / 1);
left: 10em;
padding-left: 8em;
top: 9em;
z-index: -10;
}
</style>
</head>
<body>
<h1>Verwendung von <code>z-index</code></h1>
<main>
<h2>Beispiel für die Überlappung der Elemente</h2>
<aside id="element1">Element mit z-index 2</aside>
<aside id="element2">Element mit z-index 9</aside>
<aside id="element3">Element mit z-index 0</aside>
<aside id="element4">Element mit z-index -10</aside>
</main>
</body>
</html>
Alle Elemente bekommen die position-Eigenschaft absolute und jedes weitere Element wird weiter unten und weiter rechts platziert. Außerdem bekommen sie zur Unterscheidung verschiedene Hintergrundfarben.
Das erste Element wird genauso wie das dritte Element unter dem zweiten Element angezeigt, da es den größten z-index besitzt.
Inhaltsverzeichnis
Stapelkontexte
Um zu verstehen, wie die Anordnung überlappender HTML-Elemente wirklich erfolgt, ist zunächst das Verständnis des Stapelkontexts erforderlich. Denn die z-index-Eigenschaft wirkt nicht auf HTML-Elemente, sondern auf die Stapelkontexte, die für sie erzeugt werden.
Die Layout-Engine Ihres Browsers bildet Stapelkontexte für
- das Root-Element des Dokuments
- Elemente mit
position:relativeoderposition:absolute, derenz-indexnicht den Wertautohat - Elemente mit
position:fixedoderposition:sticky(ältere Desktop-Browser haben es beistickynicht getan) - Elemente, die ein Flex- oder Grid-Item sind und deren
z-indexnicht den Wertautohat - CSS-Effekte wie
opacity,transform,filter,perspective,clip-path,mask,mask-imageodermask-border - Elemente, die explizit mittels
isolation:isolateeinen Stapelkontext anfordern
Sobald ein Element einen Stapelkontext erzeugt, sind dieses Element und alle seine Kind-Elemente Teil dieses Stapelkontextes, und bewegen sich in der Z-Ordnung gemeinsam.
Hierarchie von Stapelkontexten
Innerhalb eines Stapelkontexts können neue Stapelkontexte gebildet werden, die diesem dann untergeordnet sind. Diese untergeordneten Stapelkontexte sind an ihren Elternkontext gebunden, d. h. bei der Bestimmung der Z-Reihenfolge wirkt ein z-index nur auf Reihenfolge von gleichgeordneten Stapelkontexten.
Mit einem konstruierten Beispiel soll das visualisiert werden. Nehmen wir zum Beispiel an, unser Dokument enthält zwei aufeinander folgende <section>-Elemente. In der ersten Section befinden sich zwei <div>-Elemente mit position:absolute;.
<style>
section {
position: relative; z-index: 0; height: 200px;
}
#s1 {
background-color: lightgrey;
border: thick solid red;
margin-bottom: -100px;
}
#s2 {
background-color: rgb(200 200 200 / 0.8);
border: thick solid blue;
}
div {
position: absolute; width: 50%; height: 150px;
border: medium solid black;
z-index: 0;
}
#div1 {
background-color: lightpink; left: 30px; top: 10px;
}
#div2 {
background-color: palegreen; left: 60px; top: 20px;
}
</style>
...
<section id="s1">
<div id="div1" style="background-color: red;">...</div>
<div id="div2" style="background-color: blue;">...</div>
</section>
<section id="s2">
</section>
Die erste Section hat einen negativen margin-bottom und wird darum von der zweiten um 100 Pixel überlappt. Die zweite Section hat einen teiltransparenten Hintergrund, damit erkennbar ist, was sie verdeckt. Innerhalb der ersten Section liegen zwei absolut positionierte div-Elemente. Über CSS wird allen vier Elementen eine Positionierung und ein z-index:0 zugewiesen, deswegen entstehen für sie Stapelkontexte.
Die Hierarchie der Stapelkontexte stellt sich so dar:
root
section 1
div 1
div 2
section 2
Die beiden <div>-Elemente überlappen sich durch absolute Positionierung teilweise. #div2 ist vollständig sichtbar, #div1 wird verdeckt.
Probieren Sie es aus! Ergänzen Sie für #div1 die Angabe z-index: 1 und aktualisieren Sie das Frickl. Die Subkontext 1-1 Box wird nach vorne kommen, aber sie wird hinter der teilweise transparenten Kontext 2 Box bleiben. Entfernen Sie nun z-index:0 aus der CSS-Regel für section. Die Sections bilden jetzt keinen eigenen Stapelkontext mehr, sondern bleiben Teil des root-Kontextes. Dadurch hat #div1 die Möglichkeit, oberhalb von Section #s2 dargestellt zu werden.
Was Ihnen mit z-index allerdings nicht gelingt, ist die Platzierung eines HTML-Elementes hinter den Rahmen oder dem mit background-Eigenschaften festgelegten Hintergrund eines Elements.
Die ganze Wahrheit über Stapelkontexte ist noch etwas komplizierter und findet sich im Anhang E der CSS2 Spezifikation[1].
Quellen
Weblinks
- Philip Walton: What No One Told You About Z-Index
- Mozilla Developer Network: The Stacking Context
