CSS-Eigenschaft position : Art der Positionierung festlegen

Art der Positionierung – CSS Property position

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

1. static,
2. relative,
3. absolute,
4. fixed und

5. sticky.
   Die Positionierung »sticky« ist eine Mischung aus »relative« und »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.

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 oder Sourcecode stehen. Die Eigenschaften top (oben), right (rechts), bottom (unten) und left (links) haben bei dieser Positionierung keine Wirkung.

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

2. position: relative

Insbesondere Einsteiger verstehen "position: relative" (Deutsch: relativ) als »relativer Abstand« zu anderen HTML Elementen. Das ist so aber nicht korrekt. Mit der Positionierung "position: relative" kann man ein Element relativ zu sich selbst verschieben. D.h. relativ zu der Position, die das Element ohne Positionierung eingenommen hätte.

Mit "position: relative" kann man das Element durch die Eigenschaften top, right, bottom und left 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. Das absolute (Deutsch: absolut) positionierte Element orientiert 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 besonders für Einsteiger leicht verständlich. Feste Pixelwerte sind in der Anwendung recht eindeutig. Ein Layout, das vollständig absolut positioniert ist, ist allerdings nicht flexibel.

1. 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.

2. Wenn für ein absolut positioniertes Element der Wert width (Deutsch: Breite) nicht angegeben wird, wird die Box nur so breit wie ihr Inhalt.

3. Im Responsive Web-Design sollte auf absolute Positionierung nach Möglichkeit verzichtet werden.

4. position: fixed

Bei position: fixed (Deutsch: 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 "position: fixed" spielt es keine Rolle, ob ein Eltern-Element positioniert ist oder nicht. Der Bezugspunkt ist immer der Viewport.

5. position: sticky

Die Positionierung position: sticky (Deutsch: 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 eine seiner Kanten eine der Positionen erreicht, die durch top, right, bottom oder left definiert werden. In der Regel wird die Eigenschaft top verwendet. Damit bleibt beispielsweise die Top-Navigation im Viewport sichtbar, während ein Benutzer die Webseite von oben nach unten scrollt.