Die Eigenschaft z-index bestimmt die Stapelreihenfolge von positionierten Elementen auf einer Webseite. Sie gilt nur für positionierte Elemente, die einen Positionswert von absolute, fixed, relative oder sticky haben. Da die Elemente aus dem normalen Dokumentenfluss herausgenommen werden, geben wir z-index an, um zu bestimmen, welches dieser positionierten Elemente höher oder niedriger angezeigt werden soll.

z-index: number_without_units

Je höher der Wert der z-index-Eigenschaft ist, desto höher wird das Element auf dem Bildschirm des Benutzers angezeigt.

Lass uns üben. Wir haben vier div-Elemente mit der Klasse box, die jeweils als Quadrat gestylt und nummeriert sind, um ihre Reihenfolge im html-Dokument darzustellen. Die Quadrate sind derzeit übereinander positioniert. Die Aufgabe besteht darin, die z-index-Eigenschaft mit den richtigen Werten anzupassen, um Quadrat 3 nach vorne zu bringen und Quadrat 4 nach hinten zu schicken.

Hinweis

Wenn wir denselben Wert für die z-index-Eigenschaft für verschiedene Elemente festlegen, zeigt der Browser die Elemente in der Reihenfolge an, in der sie in der html-Datei stehen.