Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Verwaltung der Stapelreihenfolge von Elementen | CSS-Positionierung Meistern
Fortgeschrittene CSS-Techniken

bookVerwaltung 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.html

index.css

index.css

copy

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 der html-Datei stehen.

question mark

Was ist der Zweck der Eigenschaft z-index?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 10

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Awesome!

Completion rate improved to 2.04

bookVerwaltung 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.html

index.css

index.css

copy

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 der html-Datei stehen.

question mark

Was ist der Zweck der Eigenschaft z-index?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 10
some-alt