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 23.200 Kurse von Branchenfachleuten.

Versetzt weiterfließen - "position:relative"

Versetzt weiterfließen - "position:relative"

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

Gratismonat starten Für Ihr Team erwerben

Versetzt weiterfließen - "position:relative"

“

Los geht es mit der relativen Positionierung und Sie sehen hier die Übungsdatei aus dem Anfangsordner zu diesem Film im Übungsordner. Und es sieht momentan so aus, dass hier drei Boxen, drei Blockboxen im Flow sind, mit einer maximalen Breite von 25 %. Jetzt geht es los, und ich möchte die erste Box, also div:first-child etwas anders gestalten, und zwar nehmen wir erst mal eine etwas andere Hintergrundfarbe. Da soll es mal lightpink werden. So, da sieht man sie schon. Und es geht jetzt weiter mit der Positionierung. Und position heißt die Eigenschaft. Und als Wert nehme ich jetzt relative. Wie Sie sehen, sehen Sie nichts, da passiert überhaupt gar nichts, denn eine relativ positionierte Box bleibt im Flow. Zur Bestimmung der Position gibt es die Eigenschaften top, right, bottom und left, denen man bestimmte Werte zuweisen kann. Ich fange mal an mit top und sage jetzt 1rem. So, und jetzt sehen Sie, dass da oben was passiert. Da ist nämlich der Abstand von der normalen Position der Box…

Inhalt