CSS Position - Art der Positionierung

Art der Positionierung – CSS Property position

Auf dieser Seite erkläre ich die CSS-Eigenschaft Position. Die Eigenschaft hat folgende Werte:

static,
relative,
absolute,
fixed und
sticky. – Die Positionierung sticky ist eine Mischung aus position: relative und position: fixed

Die CSS-Eigenschaft Position steuert die Art der Positionierung. Auf den ersten Blick scheint diese Eigenschaft sehr simpel zu sein. Mit Position gibt man an, wie ein Element positioniert werden soll.

CSS-Eigenschaft: Position
Beschreibung	mögliche Werte	Standardwert	Kategorie
Positionierung	static relative absolute fixed sticky inherit	static	Positionierung

Die Angabe in oranger Schrift ist die Standardanwendung dieser CSS-Eigenschaft.

1. Position: static

Die Positionierung mit position: static ist der Standard. Bei dieser Positionierung werden die Elemente nacheinander so angezeigt wie sie im HTML Quelltext (Englisch: Source Code bzw. Sourcecode stehen. Die Eigenschaften

top (oben),
right (rechts),
bottom (unten) und
left (links)

haben bei dieser Positionierung keine Wirkung.

Die Positionierung position: static muss man nicht angeben, es sei denn, man will einen anderen Wert überschreiben.

2. Position: relative

Insbesondere Einsteiger verstehen position: relative als relativer Abstand zu anderen HTML-Elementen. Das ist so aber nicht korrekt. Mit der Positionierung position: relative kann man ein HTML-Element relativ zu sich selbst verschieben, d.h. relativ zu der Position, die es ohne Positionierung eingenommen hätte.

Durch die Eigenschaften top, right, bottom und left kann man das Element relativ zu seiner normalen Position verschieben.

Andere HTML-Elemente berücksichtigen die geänderte Position des Elements nicht. Das heißt, sie werden so positioniert, als ob sich die Position des (verschobenen) Elements nicht geändert hätte. Deshalb hinterlässt das verschobene Element eine Lücke an seiner ursprünglichen Position.

3. Position: absolute

Mit position: absolute positionierte Elemente werden aus dem normalen (linearen) Fluss des Dokuments entfernt. Andere Elemente rutschen deshalb in den frei gewordenen Platz. Absolut positionierte Elemente orientieren sich am nächst höheren Eltern-Element, das nicht den Wert position: static hat. Die linke obere Ecke ist der Nullpunkt mit top=0 und left=0.

Wenn das absolut positionierte Element kein positioniertes Eltern-Element hat, orientiert es sich am Anzeigebereich des Browsers (bzw. Viewport), d.h. es orientiert sich am Element BODY.

Die absolute Positionierung ist für Einsteiger besonders leicht zu berstehen. Feste Pixelwerte sind in der Anwendung recht eindeutig. Vollständig absolut positionierte Layouts sind aber nicht flexibel und für

Beachte:

Für eine absolut positionierte Box kann man die Eigenschaft Margin zwar definieren, aber diese Angabe hätte keinen Sinn. Denn absolut positionierte Elemente schweben wie auf einer Ebene über den anderen statisch oder relativ positionierten HTML-Elementen.
Wenn für ein absolut positioniertes Element der Wert Width (dt. Breite) nicht definiert wird, wird die Box nur so breit wie ihr Inhalt.
Im Responsive Web-Design sollte auf absolute Positionierung nach Möglichkeit verzichtet werden.

4. Position: fixed

Bei position: fixed (dt. fixiert) wird das Element relativ zum Browser-Fenster positioniert. Das Element wird genau wie bei position: absolute aus dem linearen Fluss des Dokuments entfernt. Andere Elemente rutschen deshalb in den frei gewordenen Platz der Webseite.

Bei position: fixed beziehen sich die Werte top, right, bottom und left auf den Anzeigebereich (Viewport) des Browsers. Das Element wird an der angegebenen Position fixiert. Dadurch erreicht man, dass das Element beim Scrollen der Webseite an seiner Position im Viewport bleibt.

Bei der Positionierung mit position: fixed spielt es keine Rolle, ob ein Eltern-Element positioniert ist. Der Bezugspunkt ist immer der Viewport.

5. Position: sticky

Die Positionierung position: sticky (dt. klebrig) ist eine Hybrid-Eigenschaft, die aus den beiden Eigenschaften position: relative und position: fixed besteht. Das Element scrollt bei dieser kombinierten Positionierung solange mit, bis es mit einer seiner Kanten eine der Positionen erreicht, die durch top, right, bottom oder left definiert werden. In der Regel wird die Eigenschaft top verwendet.