Dez 2011
Absolute und relative Positionierung für das Layout von Webseiten
Erst das Stylesheet entscheidet, in welchem Bereich dieses Layoutelemente erscheinen: Sollen die Box mit den Inhalten rechts oder links oder immer in der Mitte liegen? Soll die Navigationsleiste mit den Links auf der linken oder der rechten Seite zu sehen sein?
Die gängiste Basis für ein Layout mit CSS-Stylesheets bieten div-Tags. Sie sind Containter für Inhalte aller Art, die durch ein Stylesheet im Browserfenster positioniert werden. In ein div-Element packen wir alle Elemente des Seitenkopfs, in ein weiteres div-Element alle Elemente für die Navigation, in das nächste div-Element setzen wir die Inhalte.
CSS bietet vier Methoden für die Positionierung von Elementen:
- 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 die CSS-Eigenschaft float
Die Techniken der Positionierung von Elementen mit Cascading Stylesheets sind mächtig, aber nicht intuitiv. Für Printdesigner ist die relative Positionierung ein Mysterium.
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, die Seite, und die hat eine feste Größe. So schön einfach …
Der Monitor hingegen ist eine Unbekannte. Dazu kommt eine unbekannte Monitorauflösung und am Ende ein Benutzer, der nicht im Fullscreenmodus surfen will. Im Gegensatz zum Papier ist eine HTML-Seite »nach unten offen« – sie kann so lang werden, wie sie will.
Grundlagen: Absolute Positionierung mit CSS-Stylesheets
Was absolut positioniert wird, funktioniert genauso wie im Satz- oder Illustrationsprogramm. Das Koordinatensystem einer absolut positionierten Box ist das HTML-Dokument.
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, solange sie 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">
<p>Hier ist eine absolut positionierte Box. ….</p>
</div>
<p>Dieser Absatz liegt hinter der Box im HTML-Dokument. </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 eigenen div-Tag, der ohne expliziete Positionierung nur den Abstand (margin) nach links braucht.
#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 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.
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.
#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.
Am Rande
Wieso sind die Box für den Inhalt und die Box für die Navigation jetzt nicht auf der gleichen Höhe?
Weil jeder Browser seinen eigenen Rand hat, margin. Die absolut positionierte Box kümmert sich nicht um den Browserrand, die relativ positionierte sehr wohl. Wenn der CSS-Stil für body die margin-Eigenschaft setzt, dann sitzt alles auf einer Linie.
body { margin: 4px; }