position

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Die Eigenschaft position beschreibt die Methode, mit der ein Element auf der Seite positioniert wird.

Vererbt: nein

Siehe auch: bottom, left, right, top, z-index

Werte

Die Eigenschaft wird mit den folgenden Konstanten deklariert:

• absolute: Mit dieser Einstellung kann ein Element an einer fest definierten Stelle innerhalb seines übergeordneten Elements positioniert werden. Zum Beispiel setzt top: 0 und left: 0 das Element in die linke obere Ecke seines nächsten übergeordneten Elements, das für position einen anderen Wert als static besitzt. Ist ein solches nicht vorhanden, wird es unmittelbar innerhalb des body-Elements positioniert. Mit absolute positionierte Elemente sind aus der Dokumentstruktur einer HTML-Seite entbunden und werden aus dem Positionierungskontext für andere Elemente auf der Seite genommen.
• fixed: Diese Einstellung ermöglicht die gleiche Positionierung wie absolute. Wenn die Seite gescrollt wird, behält das Element jedoch seine Position im Browserfenster bei, anstatt mit dem Rest der Seite verschoben zu werden.
• relative: Mit dieser Einstellung wird ein Element relativ zu der Stelle positioniert, an der es mit der Einstellung static dargestellt würde. Zum Beispiel setzt top: 30px und left: 30px das Element 30 Pixel unterhalb und 30 Pixel links neben die Stelle, die es ohne Positionierung einnehmen würde. Mit relative positionierte Elemente gehören weiterhin zum Positionierungskontext für mit static oder absolute positionierte Elemente. Richtet man mit absolute positionierte Elemente an mit relative positionierten Elementen aus, bleiben diese ebenfalls im Positionierungskontext der Seite enthalten.
• static: Mit dieser Eigenschaft wird ein Element nach der normalen Dokumentstruktur positioniert. Die Eigenschaften bottom, left, right und top haben keine Auswirkungen.

Standardwert: static

Kompatibilität

CSS-Version: 2

Funktioniert in allen CSS-fähigen Browsern. Die Einstellung fixed wird jedoch nur von auf Mozilla basierenden Browsern (einschließlich Netscape ab Version 6), Opera 7 und dem Internet Explorer 5 für Macintosh korrekt umgesetzt. Der Internet Explorer für Windows (bis Version 6) interpretiert fixed genauso wie absolute.

Beispiel

Folgende Stilregel positioniert das Element mit der ID logo mit einem Abstand von 30 Pixel vom oberen und rechten Rand des Browserfensters (im Positionierungskontext befindet sich das betreffende Element unmittelbar im body-Element). Das Element bleibt an der fixierten Stelle im Browserfenster stehen, auch wenn der Benutzer auf der Seite scrollt: