9. Absolut ist relativ

Bekanntermassen kann man mit CSS Elemente sowohl absolut als auch relativ positionieren. Wählt man eine absolute Positionsangabe, kann man präzise den Abstand vom linken bzw. oberen Fensterrand angeben und so zum Beispiel die Navigation links oben der Seite platzieren.

Was aber, wenn man im laufenden Text einer Webseite Elemente absolut platzieren möchte? Die Positionsangaben sollten sich in diesem Fall nicht auf die gesamte Seite beziehen, sondern gewissermassen «lokal» für den aktuellen Abschnitt gelten.

Das ist möglich, indem man einen Container einrichtet, den man mit relativer Position ausstattet. Innerhalb dieses Containers fügt man nun ein Element ein, das mit absoluter Positionierung arbeitet:

#container {position: relative;} #fix {position: absolute; left: 30px; top: 5px;}

In der HTML-Seite wird der Container wie folgt benutzt:

<div id=»container»> <div id=»fix»> Relativ-absolut positioniert </div> </div>

Die absoluten Angaben des Elementes «fix» beziehen sich auf das übergeordnete Element, also auf den Container. Fix wird dreissig Pixel links von der linken Kante und fünf Pixel unterhalb der oberen Kante des Containers platziert.