Überlappungen von Boxen

Der z-Index

Bei der Definition von Positionierungen kann es zu Überlappungen von Elementen kommen: Standardmäßig werden alle HTML-Elemente in der Reihenfolge gezeichnet, in der sie im HTML-Dokument stehen. Elemente, die im HTML-Dokument weiter hinten stehen, werden im Browserfenster eine Ebene weiter im Vordergrund gezeichnet, d.h., das letzte Element überlappt alle vorhergehenden Elemente.

Beispiel: Überlappungen durch absolute Positionierung

See the Pen CSS – Positionierung – Überlappungen1 by Barbara Dörsam, HdM Stuttgart (@bdhdm) on CodePen.

Mit der Eigenschaft z-index kann die Reihenfolge bei der Überlappung festgelegt werden:

  1. z-index ist eine beliebige ganze Zahl
  2. Elemente werden in der aufsteigenden Reihenfolge ihrer z-index-Werte gezeichnet: Je höher die Zahl ist, desto weiter nach vorne kommt das zugehörige Element.
  3. Die Eigenschaft z-index wirkt jedoch erst, wenn die Eigenschaft position explizit gesetzt wurde, also z.B. den Wert relative oder absolute hat
Beispiel: Überlappungen mit z-index

See the Pen CSS – Positionierung – Überlappungen2 by Barbara Dörsam, HdM Stuttgart (@bdhdm) on CodePen.

Aufgaben zum Thema Überlappungen