Absolute Positionierung

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Sie wollen ein Element anstelle seiner Standardposition im Dokument frei im Ansichtsbereich anordnen.

Lösung

Weisen Sie im Stylesheet der Eigenschaft position für das betreffende Element den Wert absolute zu. Mit Hilfe der Eigenschaften top, right, bottom und left können Sie angeben, wie das Element positioniert werden soll.

Diskussion

Durch den Wert absolute für die Eigenschaft position wird das Element aus dem normalen Textfluss des Dokuments herausgenommen und anhand weiterer Angaben an einer bestimmten Stelle im umgebenden Block platziert. (Anmerkung: Näheres zur Positionierung von Elementen finden Sie in CSS – Das umfassende Handbuch von Eric Meyer (O’Reilly) in Kapitel 10.) Der Beispielcode unserer Lösung weist den Browser an, Elemente der Klasse absolute genau 50 Pixel unterhalb des oberen Randes (top) und 100 Pixel vom linken Rand (left) des umgebenden Blocks entfernt darzustellen. Der Einfachheit halber gehen wir in diesem Beispiel davon aus, dass der umgebende Block dem Browserfenster entspricht.

In der folgenden Abbildung sehen Sie, wie das Element im normalen Dokumentenfluss positioniert würde.

Abbildung: Standarddarstellung des Inhalts.

Im folgenden Schritt legen Sie fest, dass das div-Element, das den Inhalt umgibt, absolut positioniert werden soll, indem Sie ihm den entsprechenden Wert (absolute) für das Attribut class zuweisen. Das Ergebnis sehen Sie in der nächsten Abbildung:

Sie können außerdem die Eigenschaften right und bottom verwenden, um die absolute Positionierung zu beeinflussen. Die Eigenschaft bottom legt unabhängig von der Fenstergröße den Abstand von der Unterkante des umgebenden Blocks fest. Beachten Sie, dass die Eigenschaften right und bottom vom Internet Explorer 5 und von Netscape 6.0 nicht unterstützt werden.

Abbildung: Die absolute Positionierung platziert ein Element unabhängig vom übrigen Dokumentenfluss.

Warnung:
Wir haben hier die absolute Positionierung verwendet, um die Funktionsweise der Positionierung an sich zu demonstrieren. Diese Technik sollte allerdings mit Vorsicht benutzt werden, da positionierte Elemente auch dann ihren Platz nicht verändern, wenn flexible Webseiten-Layouts eingesetzt werden oder sich die Darstellung durch eine Änderung der Textgröße verändert.

Siehe auch

Das Rezept Spalten mit Floats in beliebiger Reihenfolge darstellen zeigt, wie die absolute Positionierung für die Erstellung von Seitenlayouts eingesetzt werden kann; die W3C-2.1-Spezifikation zum Thema absolute Positionierung.