Layout von Webseiten: absolut und relativ Positionieren

Erst CSS entscheidet, wo Layoutelemente erscheinen: Soll das div-Element mit den Inhalten rechts oder links oder immer in der Mitte liegen?

Soll die Navigation auf der linken oder der rechten Seite zu sehen sein?

CSS2 bot bereits vier Methoden für die Positionierung

  • statische Positionierung (keine Positionierung – alle Inhalte erscheinen in der Reihenfolge, in der sie im HTML-Quelltext vorliegen)
  • absolute Positionierung
  • relative Positionierung
  • Das Umfließen eines Elements durch CSS float

Mit CSS3 kommt display:flex hinzu – besser angepasst an die Trends des Webdesigns.

Positionieren mit CSS ist mächtig, aber nicht intuitiv

Wer in QuarkXPress, InDesign, PowerPoint oder Keynote eine Box für Texte oder Bilder aufzieht, hat einen handfesten Container. Er fängt oben links bei den Koordinaten x=40 mm, y=70 mm an und ist 140 mm breit und 200 mm hoch. Hier gibt es ein Stück Papier mit einer festen Größe.

Der Monitor hingegen ist eine Unbekannte. Dazu kommt ein Benutzer, der nicht im Fullscreenmodus surfen will oder Tablet / Handy ins Hochformat oder Querformat dreht. Im Gegensatz zum Papier ist eine HTML-Seite »nach unten offen« – sie kann so lang werden, wie sie will.

Absolute Positionierung

Was absolut positioniert wird, funktioniert wie im Satz- oder Illustrationsprogramm. Das Koordinatensystem einer absolut positionierten Box ist das HTML-Dokument.

Dieser Absatz liegt vor der Box im HTML-Dokument.

Hier ist eine absolut positionierte Box. Sie weiß nicht, was sonst noch auf der HTML-Seite los ist und die anderen Elemente der Seite kümmern sich nicht um die Box.

Am Ende noch ein Absatz nach der absolut positionierten Box.

Der folgende Quelltext zieht eine absolut positionierte Box auf. Die Box interessiert sich nicht für die übrigen Elemente der Seite und der Rest der Seite ignoriert die Box vollkommen. Also laufen alle weiteren Inhalte, die nicht ebenfalls absolut positioniert sind, hinter oder vor der Box – ähnlich wie Ebenen in einem Satz- oder Illustrationsprogramm. Darum werden positionierte HTML-Elemente in vielen Wysiwyg-Editoren auch als Layer bezeichnet.

<head>
<style type="text/css">  
#box { position: absolute;   
       height: auto; width: 200px;    
       left: 9px; top: 9px; }          
</style>    
</head>    
<body>    
<p>Dieser Absatz liegt vor der Box im HTML-Dokument. </p>    
<div id="box">Hier ist eine absolut positionierte Box …</div>    
<p>Am Ende noch ein Absatz nach der absolut positionierten …</p>    
</body>

Damit die absolut positionierte Box nicht über dem anderen Text liegt, braucht der Inhalt der Webseite einen Abstand – in diesem Beispiel nach links. Am besten sitzt der Inhalt in einem Block, der ohne expliziete Positionierung nur den Abstand (margin) nach links braucht.

Eine absolut positionierte Box braucht immer eine Breite und eine Höhe.

Hier ist eine absolut positionierte Box. Sie weiß nicht, was sonst noch auf der HTML-Seite los ist und die anderen Elemente der Seite kümmern sich nicht um die Box.
Dieser Absatz liegt in einem div mit margin. Dieser Absatz liegt in einem div mit margin.
#content {margin-left: 240px; }
…
<div id="box"> Hier ist eine absolut positionierte Box. … </div>
<div id="content">
<p>Dieser Absatz liegt in einem div mit margin. </p>
…
</div>

Zu den schönen Eigenschaften der absoluten Positionierung gehört, dass es egal ist, ob ein absolut positionierter Block vor oder nach dem Container für den Inhalt liegt: So können wir den Suchmaschinen den wichtigen Inhalt der Seite sofort am Anfang des HTML-Dokuments bieten.

Die Haken der absoluten Positionierung

Diese Technik der absoluten Positionierung erscheint einfach und intuitiv. Wir könnten die Webseite mit absolut positionierten Containern flexibel gestalten. Der unverzichtbare Seitenfuß macht uns einen Strich durch die Rechnung: Es gibt keinen Anhaltspunkt, wo der Fuß der Seite positioniert werden soll. Einfach absolut unter der Box positionieren? Geht nicht gut, denn irgendwann werden die Inhalte der absolut positionierten Box geändert oder der Besucher ändert die Schriftgröße und schon erstreckt sich die Box über den Seitenfuß hinaus.

Hier ist eine absolut positionierte Box: z.B. für die Navigation in der Seitenleiste.
Wir wissen nie, wie hoch dieser Block wird und der Block hat keinen Einfluß auf den Seitenfuß.
Der Block für den Inhalt kann relativ, statisch oder per float positioniert werden: Dann schiebt der Block den Fuß der Seite nach unten, wenn der Inhalt wächst.
Wir wissen nie, wo der Footer der Seite sitzen soll, denn eine absolut positionierte Box verdrängt den Seitenfuß nicht nach unten, wenn sie wächst oder durch einen kleineren Viewport neu umgebrochen wird.

Absolut positionierte Blöcke sind für Inhalte mit fester Höhe geeignet, z.B. für den Header und die Bilder in einer Slideshow.

Relative Positionierung

Das Koordinatensystem für die relativ positionierte Box ist die Position der Box im HTML-Dokument (bei der absolut positionierten Box das HTML-Dokument, nicht die Position im HTML-Dokument) – das ist das Relative an der relativen Positionierung. Wenn die Box das erste Element im Dokument ist, wird kein Unterschied zur absolut positionierten Box zu sehen sein. Wenn aber Elemente vor der Box im HTML-Dokument notiert werden, rutscht die Box langsam aber sicher ab – sie wandert mit den Inhalten nach unten.

Hier ist eine absolut positionierte Box. Sie weiß nicht, was sonst noch auf der HTML-Seite los ist und die anderen Elemente der Seite kümmern sich nicht um die Box.
Dieser Absatz liegt in einem div mit margin. Dieser Absatz liegt in einem div mit margin.
Hier ist eine relativ positionierte Box. Sie berechnet ihre Startposition aus den HTML-Elementen, die vor ihr liegen. Alles, was auf der HTML-Seite nach der Box notiert wird, folgt auf die Box.
Dieser Absatz liegt in einem div mit margin. Dieser Absatz liegt in einem div mit margin.
#box { position: relative; margin-right: 240px; }
.content { margin-right: 240px; }
… 
<div class="content"> Dieser Absatz liegt in einem div mit margin. </div>
<div id="box"> Hier ist eine relativ positionierte Box …</div>
<div class="content"> Dieser Absatz liegt in einem div mit margin. </div>
<div id="absBox"> Hier ist eine absolut positionierte Box. … </div>

Was hinter der Box im HTML-Dokument steht, kümmert sich sehr wohl um die Box und erscheint hinter ihr. Das erscheint jetzt alles etwas unspektakulär …

Interessant wird die relative Positionierung, wenn absolut positionierte Blöcke in einen relativ positionierten Blocks eingebunden werden: Absolut positionierte Blöcke unter einem relativ positionierten Block werden relativ zum relativ positionierten Block platziert.

  • Also: Absolute Positionierung ist für Inhalte von fester Größe geeignet (z.B. Bilder in einer Slideshow).
  • Ein relativ positionierter Block ist ein prima Behälter für absolut positionierte Elemente, die per CSS oder Javascript animiert werden (z.B. aufklappende Boxen für die Navigation oder Tabs oder Slideshows im Kopf der Seite).

Absolut positionierte Elemente in relativ positionierten Blöcken