CSS verstehen: z-index genauer betrachtet
CSS verstehen: z-index genauer betrachtet
Der z-index begegnet jedem professionellem Webentwickler beim Gestalten einer Website. Man verwendet ihn, um Elemente (z.B. Dialoge) in den Vordergrund bzw. Hintergrund zu rücken, also diese entlang einer imaginären Z-Achse zu verschieben. Das Prinzip ist denkbar einfach. Je höher die Zahl, desto weiter vorne. Doch schnell wird klar, dass es doch nicht ganz so einfach sein kann, spätestens in dem Moment, in dem man den z-index auf HTML-Elemente anwendet, die nicht positioniert sind. Da scheint er keinerlei Auswirkung zu haben. Bei der Recherche, warum das so ist, stößt man im Web öfters auf die Erklärung, dass der z-index nur bei positionierten Elementen funktioniert. Wenn man sich ausführlicher damit beschäftigt, bemerkt man, dass dieser Ansatz nicht vollständig sein kann. Denn manchmal hat der z-index auch bei statischen Elementen eine Auswirkung. Woran liegt das?
Die Positionierung eines HTML-Elements ist, wie gesagt, nicht der einzige Grund dafür, dass der z-index funktioniert. Eigentlich ist dies der sogenannte stacking context. Dieser wird durch unterschiedliche Eigenschaften erzeugt.
Häufig verwendete Möglichkeiten sind folgende (Liste nicht vollständig):
- Element ist das root-element (<html>).
- Element mit Position absolute oder relative, kombiniert mit einem z-index Wert, der nicht auto ist.
- Element mit Position fixed oder sticky
- Kind eines flexbox-containers, kombiniert mit einem z-index-Wert, der nicht auto ist.
- Kind eines grid-containers, kombiniert mit einem z-index-Wert, der nicht auto ist.
- Ein opacity-Wert kleiner als 1.
- mix-blend-mode mit anderem Wert als normal
- isolation mit Wert isolate
- -webkit-overflow-scrolling mit Wert touch
- Folgende Eigenschaften mit einem anderen Wert als none:
- transform
- filter
- perspective
- clip-path
- mask/mask-image/mask-border
In allen diesen Fällen entsteht ein stacking context und der z-index wird funktionieren. Das ist schon einmal gut zu wissen. Dennoch kann es sein, dass man einen hohen z-index anwendet und das Element ist trotzdem nicht vor einem Element, das einen niedrigeren hat. Hierbei kann es an der Hierarchie liegen.
Eine wichtige Sache ist, dass der z-index immer im Zusammenhang mit dem Elternelement steht. Ein Kind bleibt immer im stacking context seines Elternelements. Was bedeutet das?
Ein einfaches Beispiel zur Veranschaulichung:
<div class =“flexWrapper“> <div class=“greenDiv“>Div 2</div> <div class=“redDiv“>Div 1 <div class=“yellowDiv“>Div 1.1.</div> </div> </div>
Div1 hat einen z-index von 1. Div2 hat einen z-index von 2. Div1 und Div2 sind Geschwister. Div1.1. ist ein Kind von Div1 und hat einen z-index von 3. Div1.1. erscheint nicht vor Div2, obwohl es einen höheren z-index hat. Div1.1 bleibt im stacking context seines Elternelements und das hat z-index: 1. Somit erscheint es hinter Div2.
.flexWrapper {
display: flex;
width: 300px;
height: 200px;
align-items: center;
justify-content: center;
}
.greenDiv {
z-index: 2;
background-color: green;
position: relative;
top: 35px;
left: 35px;
width: 100px;
height: 100px;
color: white;
}
.redDiv {
z-index: 1;
background-color: red;
width: 100px;
height: 100px;
color: white;
}
.yellowDiv {
z-index: 3;
background-color: yellow;
width: 50px;
height: 50px;
font-size: 10px;
}
Wie aus dem Code ersichtlich sind Div1 und Div2 Kinder einer Flex-box. Beide können daher durch den z-index manipuliert werden unabhängig von der Position des Element.
Wenn ich nun den z-index von Div1 auf 3 erhöhe wird sein Kind Div1.1. sozusagen mit erhöht und ebenfalls vor Div2 angezeigt.
.flexWrapper {
display: flex;
width: 300px;
height: 200px;
align-items: center;
justify-content: center;
}
.greenDiv {
z-index: 2;
background-color: green;
position: relative;
top: 35px;
left: 35px;
width: 100px;
height: 100px;
color: white;
}
.redDiv {
z-index: 3;
background-color: red;
width: 100px;
height: 100px;
color: white;
}
.yellowDiv {
z-index: 3;
background-color: yellow;
width: 50px;
height: 50px;
font-size: 10px;
}
Auch ohne z-index haben Elemente bereits eine Ordnung, wie sie gezeichnet werden. Diese ist folgende:
- Das Root-Element
- Nicht positionierte divs, geordnet nach Erscheinen im html (je später, desto weiter vorne)
- Positionierte divs, geordnet nach Erscheinen im html (je später, desto weiter vorne)
Diese Zusammenhänge helfen dabei besser zu verstehen, wie sich einzelne Elemente einer Website bezüglich ihrer Stapelordnung verhalten und wie sich diese manipulieren lässt.
Roja Maschajekhi
22.07.2020
