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.

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.