Wofür ist die Eigenschaft z-index in CSS verantwortlich?

Die Eigenschaft z-index in CSS steuert die Stapelreihenfolge von positionierten Elementen entlang der Z-Achse. Elemente mit einem höheren z-index-Wert werden über Elementen mit einem niedrigeren Wert platziert.

Wichtige Punkte:

• Gilt nur für positionierte Elemente (position: relative, absolute, fixed, sticky).
• Der Wert kann eine Zahl sein (positiv, negativ oder null).
• Der automatische Wert (auto) entspricht der Reihenfolge im DOM-Baum.
• Negative z-index-Werte können ein Element unter das Elternelement und dessen Inhalt platzieren.
• z-index erstellt einen Stapelkontext (stacking context). Elemente innerhalb eines gleichen Kontexts werden nach ihrem z-index sortiert, aber der gesamte Kontext verhält sich im Vergleich zu anderen Kontexten wie eine Einheit.

Standard-Stapelreihenfolge (ohne z-index):

1. Hintergrund und Rahmen des Wurzelelements.
2. Positionierte Elemente mit negativem z-index.
3. Block-Elemente im normalen Fluss.
4. Float-Elemente.
5. Inline-Elemente im normalen Fluss.
6. Positionierte Elemente mit z-index: auto oder z-index: 0.
7. Positionierte Elemente mit positivem z-index.

Beispiel:

/* style.css */
.box {
  position: absolute;
  width: 100px;
  height: 100px;
}

.red {
  background-color: red;
  top: 10px;
  left: 10px;
  z-index: 1; /* Wird über Blau liegen */
}

.blue {
  background-color: blue;
  top: 30px;
  left: 30px;
  z-index: 0; /* Wird unter Rot liegen */
}

<!-- index.html -->
<div class="box red"></div>
<div class="box blue"></div>

In diesem Fall befindet sich der rote Block (z-index: 1) über dem blauen Block (z-index: 0).