CSS z-index

Mit der Eigenschaft z-index können wir steuern, welche Elemente vor oder hinter anderen angezeigt werden. Diese Schichtung ist entscheidend für die Gestaltung komplexer Oberflächen.

Grundlagen von z-index

Die Werte von z-index bestimmen die Reihenfolge der Elemente in den Ebenen. Sie funktionieren nur bei Elementen, deren position nicht static ist.

Wert	Beschreibung
auto	Das Element erbt die Stapelreihenfolge des Elternelements.
0, 1, 10, ...	Bei positiven Werten wird das Element weiter nach vorne gestapelt.
-1, -10, ...	Bei negativen Werten wird das Element weiter nach hinten gestapelt.

Beispiel für die Verwendung von z-index

In diesem Beispiel werden zwei Boxen übereinander gelegt. Der z-index bestimmt, welche oben sichtbar ist.

Die blaue Box hat den Wert z-index: 1, während die rote Box mit z-index: 2 darüber angezeigt wird.

Stacking Context (Stapelkontext)

Der Stacking Context bestimmt, wie Elemente übereinander angeordnet werden. Ein neuer Stacking Context entsteht zum Beispiel, wenn ein Element eine position-Eigenschaft und einen z-index erhält oder bestimmte CSS-Eigenschaften (wie opacity < 1) verwendet werden.

Im folgenden Beispiel erzeugt das Elternelement einen Stacking Context, sodass die z-index-Werte seiner Kinder nur innerhalb dieses Kontexts gelten.

Praktische Verwendung

z-index wird häufig bei Pop-ups, Menüs, Modals oder Tooltips verwendet. Wenn ein Menü hinter einem anderen Element erscheint, kann es mit z-index nach vorne geholt werden.

Tipps zur Verwendung von z-index

Die richtige Verwendung von z-index hilft, unerwartete Überlagerungen zu vermeiden und sorgt für eine klare visuelle Hierarchie.

Überprüfe immer, ob das Element eine position-Eigenschaft hat (z. B. relative, absolute, fixed).
Vermeide zu hohe oder zufällige Werte, da das Layout unübersichtlich werden kann.
Verwende ein logisches Schichtungssystem für ein konsistentes Layout.