z-index

Mit z-index legst du fest, welches Element bei Überlappungen vorne liegt. Höhere Werte erscheinen weiter oben.

Was ist z-index?

z-index steuert die Stapelreihenfolge auf der Z-Achse. Der Standardwert ist auto. Wichtig: z-index wirkt nur bei Elementen mit position ungleich static – oder bei Flex- und Grid-Items.

1.box {
2    position: relative;
3    z-index: 2;
4}

Überlappende Elemente

Elemente mit größerem z-index liegen über Elementen mit kleinerem Wert.

1.box-a {
2    position: relative;
3    z-index: 1;
4}
5
6.box-b {
7    position: relative;
8    z-index: 2;
9}
10
11.box-c {
12    position: relative;
13    z-index: 3;
14}