Stapelreihenfolge
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.
index.html
index.css
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 derhtml
-Datei stehen.
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Awesome!
Completion rate improved to 2.04
Stapelreihenfolge
Swipe um das Menü anzuzeigen
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.
index.html
index.css
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 derhtml
-Datei stehen.
Danke für Ihr Feedback!