Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

So erhalten Sie Zugriff auf diesen Kurs

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 24.900 Kurse von Branchenfachleuten.

Positionierte Boxen und die Stapelreihenfolge mit der Eigenschaft "z-index"

Positionierte Boxen und die Stapelreihenfolge mit der Eigenschaft "z-index"

Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

Gratismonat starten Für Ihr Team erwerben

Positionierte Boxen und die Stapelreihenfolge mit der Eigenschaft "z-index"

“

In diesem Film geht es jetzt um den z-index und die Übungsdatei aus dem Anfangsordner zu diesem Film liegt im Übungsordner und hier ist der Quelltext, der in der Livevorschau so aussieht: Drei Boxen, hier unten drei divs, beschriftet Box 1, Box 2 und Box 3. Und positioniert, wie Sie hier im CSS sehen, alle divs sind "position: absolut". Und "div:nth-child(1)" ist "top: 0;", "left: 0;" und weiß, das ist Box 1 hier oben. "div:nth-child(2)" ist "top: 4rem;" und links 4rem und die dritte Box ist von oben 8rem und von links auch 8rem. Sie haben alle etwas unterschiedliche Hintergrundfarben, sodass man sie leicht erkennen kann. Sie sollen jetzt mit z-index gestaltet werden. In Diagramm gibt es neben der x- und der y-Achse auch noch eine z-Achse, die sich von vorne nach hinten erstreckt, also quasi aus dem Bildschirm heraus oder in den Bildschirm herein, je nachdem, wie Sie das sehen. Positionierte Elemente haben einen z-index, der die Position des Elements auf dieser z-Achse beschreibt; nur…

Inhalt