Verwaltung der Stapelreihenfolge von Elementen
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
besitzen. Da diese Elemente aus dem normalen Dokumentenfluss herausgenommen werden, legen wir mit z-index
fest, welches dieser positionierten Elemente höher oder niedriger angezeigt wird.
z-index: number_without_units
Je höher der Wert der Eigenschaft z-index
, desto weiter oben wird das Element auf dem Bildschirm angezeigt.
Übung: Es gibt vier div
-Elemente mit der Klasse box
, die jeweils als Quadrat gestaltet und nummeriert sind, um ihre Reihenfolge im html
-Dokument darzustellen. Die Quadrate liegen aktuell übereinander. Die Aufgabe besteht darin, die Eigenschaft z-index mit den richtigen Werten zu versehen, sodass Quadrat 3 ganz vorne und Quadrat 4 ganz hinten angezeigt wird.
index.html
index.css
Hinweis
Wenn wir für verschiedene Elemente denselben Wert für die Eigenschaft
z-index
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
Verwaltung der Stapelreihenfolge von Elementen
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
besitzen. Da diese Elemente aus dem normalen Dokumentenfluss herausgenommen werden, legen wir mit z-index
fest, welches dieser positionierten Elemente höher oder niedriger angezeigt wird.
z-index: number_without_units
Je höher der Wert der Eigenschaft z-index
, desto weiter oben wird das Element auf dem Bildschirm angezeigt.
Übung: Es gibt vier div
-Elemente mit der Klasse box
, die jeweils als Quadrat gestaltet und nummeriert sind, um ihre Reihenfolge im html
-Dokument darzustellen. Die Quadrate liegen aktuell übereinander. Die Aufgabe besteht darin, die Eigenschaft z-index mit den richtigen Werten zu versehen, sodass Quadrat 3 ganz vorne und Quadrat 4 ganz hinten angezeigt wird.
index.html
index.css
Hinweis
Wenn wir für verschiedene Elemente denselben Wert für die Eigenschaft
z-index
festlegen, zeigt der Browser die Elemente in der Reihenfolge an, in der sie in derhtml
-Datei stehen.
Danke für Ihr Feedback!