Der Z-Index legt fest, welches Element vor welchem liegt, wenn sie sich überlappen. Er wirkt nur unter Bedingungen, die regelmäßig übersehen werden.
- Z-Index
Eigenschaft, die die Reihenfolge überlappender Elemente in der Tiefe bestimmt.
Beispiel: „Ein Z-Index wirkt nur an Elementen, die positioniert sind.“
Zwei Bedingungen
Erstens muss das Element positioniert sein, also einen anderen Wert als static tragen. An einem gewöhnlichen Element im Fluss bleibt die Angabe wirkungslos. Zweitens gilt sie nur innerhalb ihres Stapelkontexts.
Der Stapelkontext
Ein Stapelkontext ist eine eigene Welt: Innerhalb gilt die Reihenfolge, nach außen zählt nur der Kontext als Ganzes. Erzeugt wird einer unter anderem durch einen Z-Index an einem positionierten Element, durch opacity unter eins und durch transform.
Daraus folgt der häufigste Fall von Ratlosigkeit: Ein Element mit z-index: 9999 liegt trotzdem hinter einem anderen, weil sein Elternkontext weiter hinten liegt. Die Lösung ist nie eine höhere Zahl, sondern der Blick auf die Kontexte.