Webdesign mit CSS, XHTML und Javascript
Stil mit {stil}
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. Sie weiß nichts über den Rest
der HTML-Seite und die anderen Elemente der Seite kümmern sich nicht um die Box.</p>
</div>
<p>Dieser Absatz liegt hinter der Box im HTML-Dokument. </p>
</body>
Diese Technik ist einfach und intuitiv. Wir könnten das HTML-Dokument mit absolut positionierten Containtern flexibel gestalten, aber der unverzichtbare Seitenfuß macht uns einen Strich durch die Rechnung, denn es gibt keinen Anhaltspunkt, wo der Fuß der Seite positioniert werden soll. Einfach absolut unter der gelben Box positionieren? Geht nicht gut, denn irgendwann werden die Inhalte der gelben Box geändert oder der Besucher ändert die Schriftgröße und schon erstreckt sich die gelbe 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.
Was hinter der Box im HTML-Dokument steht, kümmert sich sehr wohl um die Box und erscheint erst hinter ihr.
Blöcke mit der CSS-Eigenschaft position: relative lassen sich genauso positionieren wie Blöcke mit position: absolute. Aber position: relative ändert die Art und Weise, wie Blöcke unterhalb des 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 Stil für body den Rand auf 0 setzt:
body { margin: 0px; }
ist alles auf einer Linie.