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.

Raus aus dem Fluss: "position:absolute"

Raus aus dem Fluss: "position:absolute"

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

Gratismonat starten Für Ihr Team erwerben

Raus aus dem Fluss: "position:absolute"

“

Jetzt geht es um die absolute Positionierung. Hier ist die Datei aus dem Anfangsordner zu diesem Film im Übungsordner bereits geöffnet. Und hier sehen Sie wieder die drei Boxen mit der relativen Positionierung: "position: relative; top: 1rem; right: 0,5rem;". Wenn ich jetzt die absolute Positionierung einsetze, dann wird das Element komplett aus dem Flow herausgezogen. Es wird also buchstäblich hochgezogen und alle anderen Elemente auf der Seite verhalten sich so, als ob das absolut positionierte Element gar nicht vorhanden wäre. So, jetzt also wird relative zu absolute. Und achten Sie rechts auf die Box 1. Da passiert alles Mögliche. Sie sehen hier, dass die Position komplett geändert wird. "top: 1rem;" wird jetzt von hier oben gemessen. Und "right: 0.5" wird von rechts außen gemessen. D.h., für die absolute Positionierung ist der Bezugspunkt für top, right, bottom und left nicht mehr die Position im Flow, sondern das Stammelement html. Absolute Positionierung bezieht sich auf das…

Inhalt