CSS, HTML und Javascript mit {stil}

Layout von Webseiten: absolut und relativ Positionieren

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

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

Die Basis für ein Layout mit CSS sind div-Tags. Sie sind Container für Inhalte aller Art, die durch CSS im Browserfenster positioniert werden. In ein div-Element packen wir alle Elemente des Seitenkopfs, in ein weiteres div die Navigation, in das nächste div setzen wir die Inhalte.

CSS bietet vier Methoden für die Positionierung von Elementen:

Das Positionieren von Elementen mit CSS ist mächtig, aber nicht intuitiv

Wer in QuarkXPress, InDesign oder Grafikprogrammen wie Freehand und Illustrator 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 das Tablet oder das 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 div-Tag, das ohne expliziete Positionierung nur den Abstand (margin) nach links braucht.

Eine absolut positionierte Box braucht also 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 das absolut positionierte div-Tag 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 ist einfach und intuitiv. Wir könnten die Webseite mit absolut positionierten Containern flexibel gestalten. Der unverzichtbare Seitenfuß macht uns allerdings 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.

Absolut positionierte Blöcke sind vor allem für Inhalte von fester Breite und Höhe gedacht, 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 erst 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 gedacht.
  • Ein relativ positionierter Block ist ein 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