CSS Positionieren • Absolute und relative Positionierung

Digitale Fotografie, Erfahrungsberichte zu neuen Kameras und Bildbearbeitung

Dez 2008

Absolute und relative Positionierung für das Layout von Webseiten

Die gängiste Basis für ein Layout mit CSS-Stylesheets bieten <div>-Elemente. Sie sind Kontainer 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 leider auch nicht immer 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 Kontainer. 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. Darum 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 Kontainern 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.

<style type="text/css">
#box { position: relative; top: 9px; left: 9px; 
      width: 200px; height: auto; }
</style>
…
<p>Dieser Absatz liegt vor der Box im HTML-Dokument. </p>
<div id="box"><p>Hier ist eine relativ positionierte Box. Sie 
    berechnet ihre Startposition aus den HTML-Elementen, 
    die vor ihr im Dokument liegen. </p>
<p>Alles, was im Dokument nach der Box notiert wird, folgt auf die Box. </p>
</div>
<p>Dieser Absatz liegt hinter der Box im HTML-Dokument. </p>

Positionierung von Navigationselementen und Inhalten

Ergo: Eine Navigationsleiste, die ihren festen Platz im Dokument einnehmen soll – z.B. die Navigationsleiste auf der rechten Seite in diesem Dokument – ist ein typischer Kandidat für die absolute Positionierung. Die Fußleiste hingegen soll immer hinter den Inhalten dargestellt werden – sie wird also relativ positioniert. Damit die Fußleiste überhaupt feststellt, wie groß die Box für die Inhalte ist, muss der Container für die Inhalte ebenfalls relativ positioniert werden.

Als erster Container wird im Dokument der Inhalt angelegt, dahinter die Fußleiste:

#inhalt { 
          position: relative; 
          background: khaki; height: auto; width: 60%;
          left: 9px; top: 9px; 
}
#fussleiste { 
          position: relative; 
          background: silver; height: 100px; width: 60%;
          left: 9px; top: 20px; 
}
#navigation { 
          position: absolute; 
          background: salmon; height: auto; width: 25%; 
          left: auto; top: 9px; right: 9px; bottom: auto; 
}

Das ist eine typische Kombination aus relativer und absoluter Positionierung, um daraus ein komplettes Dokument aufzubauen. Was wir jetzt haben, ist also die Basis für ein CSS-Seitenlayout, das sich der Monitorauflösung anpasst.

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.

Noch eine Navigationsleiste oben gefällig?

Wer will, kann ganz oben noch eine Box für eine horizontale Navigation oder Logos einbauen. Diese Box kann sich ober die gesamte Breite des Dokuments ziehen oder neben der Navigationsleiste liegen.

#top { width: 100%; height: 100px; background: darkseagreen; padding: 4px; }

Dann muss die absolut positionierte Box für die Navigation tiefer gelegt werden.

#navigation { ... top: 109px; ... }

Das war schon alles – das Grundgerüst für ein CSS-Layout steht. Die realtiv positionierten Boxen für Inhalt und Fussleiste müssen nicht verändert werden, wenn sich die Inhalte ändern – sie fließen einfach mit.

Jetzt müssen nur noch die Stile in eine separate Datei gepackt werden, damit sie für alle weiteren Dokumente der Site verfügbar sind. Die Datei wird als stil.css gespeichert. Die @import-Regel ist eine Alternative zum gelinkten Stylesheet und wird in das <style>-Tag geschrieben:

<style type="text/css">
   @import "style.css";
</style>

Stylesheets mit Macromedia Dreamweaver verknüpfen oder importieren Dreamweaver kann die Stylesheetdatei "linken" oder "importieren".