Layout für Monitore
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 sein Tablet oder 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.
CSS gibt mehrere Methoden für das Positionieren von Elementen vor
- statische Positionierung (keine Positionierung – alle Inhalte erscheinen in der Reihenfolge, in der sie im HTML-Quelltext vorliegen)
- position: absolute – sitzt an einer absoluten Position im Viewport oder innerhalb eines relativ positionierten Containers
- position: relative – Container für absolut positionierte Elemente
- position: fixed bleibt beim Scollen an seinem Platz
- position: sticky – Mischung aus absolute und fixed, scollt bis Elemente an einer beliebigen Position fixiert werden.
- Das Umfließen eines Elements durch CSS float
- Heute kommen display:grid und display:flex hinzu – ein Layoutraster und flexible Zeilen.
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. Dieser Absatz liegt vor der Box im HTML-Dokument.
Am Ende noch ein Absatz nach der absolut positionierten Box. Am Ende noch ein Absatz nach der absolut positionierten Box.
Der folgende Quelltext zieht einen absolut positionierten Block auf. Der Block interessiert sich nicht für die übrigen Elemente der Seite und der Rest der Seite ignoriert die Block 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 wurden positionierte HTML-Elemente in vielen Wysiwyg-HTML-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 explizite Positionierung nur den Abstand (margin) nach links braucht.
Ein absolut positionierter Block braucht immer eine Breite und eine Höhe.
#box {
position: absolute;
height: auto; width: 200px;
left: 9px; top: 9px;
}
#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.
Seitenfuß / Footer ans Ende der Seite
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.
Wir wissen nie, wie hoch dieser Block wird und der Block hat keinen Einfluß auf den Seitenfuß.
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.
Eine Lösung für einen Footer am Ende der Seite kommt mit display: flex und flex-direction: column.
body {
height: 100vh;
display: flex;
flex-direction: column;
}
footer {
margin-top: auto;
}
Relative Positionierung
Das Koordinatensystem für den relativ positionierten Block ist die Position des Blocks im Inhalt der Seite (bei einem absolut positionierten Block das HTML-Dokument, nicht die Position in der Seite). Das ist das Relative an der relativen Positionierung.
Wenn der Block das erste Element im Dokument ist, wird kein Unterschied zur absolut positionierten Box zu sehen sein. Wenn aber Elemente vor dem relativen Block erscheinen, rutscht der Block 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 hinter ihr. Das erscheint jetzt alles etwas unspektakulär …
Interessant wird relatives Positionieren, wenn absolut positionierte Elemente in einen relativ positionierten Block liegen:
Liegt ein absolut positioniertes Element in einem Block mit position:relative, wird dieser Block sein Koordinatensystem. Seine Koordinaten top, right, bottom und left beziehen sich auf den relativ positionierten Block.
- 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).