Der Z-Index in CSS wird verwendet, um die Überlappungsreihenfolge von Positionselementen zu bestimmen. Ein Element mit einem höheren Z-Index wird immer vor einem Element mit einem niedrigeren Z-Index angezeigt.
Dabei ist zu beachten, dass der Z-Index nur bei Elementen funktioniert, die entweder relativ, absolut oder fest positioniert sind.
Hier ein Beispiel:
```css
.element1 {
position: absolute;
z-index: 1;
…
}
.element2 {
position: absolute;
z-index: 2;
…
}
```
In diesem Fall wird .element2 vor .element1 angezeigt, weil .element2 einen höheren Z-Index hat.
Der Standardwert für den Z-Index ist `auto`, was bedeutet, dass die Stapelreihenfolge auf der Grundlage der Position im Code bestimmt wird, ganz so, als ob kein Z-Index angegeben war.
Ein negativer Z-Index ist auch möglich. Ein Element mit einem negativen Z-Index wird hinter einem Element ohne Z-Index oder mit einem Z-Index von 0 angezeigt.
Es ist auch gut zu wissen, dass der Z-Index relativ zur nächstgelegenen übergeordneten Ebene mit einem Z-Index von ‘auto’ (der Standardwert) ist. Wenn zwei überlappende Elemente denselben Elternteil haben und kein Z-Index definiert ist, wird das Element, das zuletzt im HTML-Code erscheint, angezeigt. Wenn sie jedoch verschiedene Eltern haben, kann das Element mit dem höheren Z-Index des Elternteils noch hinter einem Element mit einem niedrigeren Z-Index liegen, wenn dieses Element in einem späteren Codeabschnitt liegt.
