Art der Positionierung: CSS Eigenschaft Position
Auf dieser Seite erkläre ich die CSS-Eigenschaft position. Diese Eigenschaft hat folgende Werte:
- static,
- relative,
- absolute,
- fixed und
-
sticky – Diese Positionierung 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 dieser Eigenschaft gibt man an, wie ein Element positioniert werden soll.
| Beschreibung | mögliche Werte | Standardwert | Kategorie |
|---|---|---|---|
| Positionierung | static relative absolute fixed sticky inherit |
static | Positionierung |
Die Angabe in oranger Schrift ist die Standardanwendung der CSS-Eigenschaft position
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 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 verstehen. Feste Pixelwerte sind in der Anwendung recht eindeutig. Vollständig absolut positionierte Layouts sind aber nicht flexibel.
-
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 die Eigenschaft 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 die Eigenschaften top, right, bottom und left definiert werden. In der Regel wird die Eigenschaft top verwendet.
Damit bleibt beispielsweise die Top-Navigation im Viewport sichtbar, während der Benutzer die Webseite von oben nach unten scrollt.