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

Praktisch: absolute und relative Positionierung kombinieren

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

Gratismonat starten Für Ihr Team erwerben

Praktisch: absolute und relative Positionierung kombinieren

“

In der Praxis werden absolute und relative Positionierung häufig kombiniert. Und das möchte ich Ihnen jetzt zeigen, warum das sehr praktisch sein kann. Hier ist die Übungsdatei aus dem Anfangsordner zu diesem Film im Übungsordner und das ist der Quelltext dazu. Die Live-Vorschau zeigt eine umgebende Box mit der Klasse box1, hier die große Box. Und darin gibt es eine kleine Box, noch ein div mit der Klasse box2 und der Beschriftung "Box 2". Diese Box 2 hat einen pinkfarbenen Hintergrund. Box 1 ist weiß und hat einen dunkelroten Rahmen. Das ist die Ausgangsposition. Und jetzt möchte ich Box 2 absolut positionieren. Also, "position: absolute;". Da passiert schon ein bisschen was, aber die Position hat sich noch nicht geändert, weil ich noch nicht gesagt habe, was passieren soll. "bottom: 0;", also ganz unten sitzt die Box. Und "left: 0;", jetzt wird sie ganz unten links sitzen. D.h., eine absolut positionierte Box wird, sofern es keine umgebende positionierte Box gibt, wie Sie gleich sehen werden, am Stammelement html ausgerichtet, also am Viewport für unsere Verhältnisse hier. So, und jetzt kommt der Trick: Wenn ich jetzt die umgebende Box hier auf "position: relative;" setze, ups, dann ändert sich die Sachlage ganz gehörig hier. Die absolut positionierte Box, die positioniert ist mit bottom und left, sitzt nicht mehr ganz unten auf der Seite, sondern sitzt jetzt innerhalb der umgebenden relativ positionierten Box. Sie sehen, die Box bekommt überhaupt keine Werte, weil sie soll einfach nur positioniert werden. Sie sitzt an derselben Stelle, als ob hier static stehen würde. Nur static, damit ist die Box nicht positioniert und die Bezugspunkte für die absolut positionierte Box sind orientiert am Stammelement html. Sobald ich das hier wieder ändere zu relative, ist eine positionierte Box vorhanden. Diese Box ist da ein Elternelement zum absolut positionierten Element und schon wird die darin positioniert. Das bedeutet also zusammengefasst, dass absolut positionierte Boxen aus dem Flow gehoben werden hier, und sie liegen quasi über den anderen Boxen und die Boxen ignorieren einander. Der Browser hat da nichts mehr mit zu tun. Für absolut positionierte Boxen ist die Webdesignerin oder der Webdesigner selbst verantwortlich. Dass die sich nicht mit anderen Boxen in die Query kommen, dann muss sie bzw. er sich selbst drum kümmern. Für die Eigenschaften top, right, bottom und left zum Positionieren gibt es unterschiedliche Bezugspunkte, wie man hier ganz deutlich gesehen hat. Zunächst einmal orientieren die sich an der nächsten umgebenden positionierten Box, also eine Box, die nicht den Wert static hat. Falls es die nicht geben sollte hier im HTML und CSS, dann wird die Positionierung am Stammelement HTML orientiert. Man könnte also sagen, absolute Positionierung ist immer relativ zu einem Bezugspunkt und es gibt zwei mögliche Bezugspunkte: Das nächste umgebende positionierte Element so wie hier, und falls das nicht vorhanden ist, das Stammelement html.

Inhalt