CSS-Eigenschaft Position – Art der Positionierung
- Schriftart definieren
- Schriftgröße definieren
- Schriftfarbe definieren
- Textausrichtung
- Text-Dekoration
- Hintergrundfarbe definieren
- Schriftfarbe definieren
- Rahmen – Border
- HTML Farbnamen
- CSS Box-Modell
- Außenabstand – Margin
- Innenabstand – Padding
- Rahmen – Border
- CSS Float Modell
- Art der Positionierung: Position
- Art der Darstellung: Display
- Außenabstand – Margin
- Innenabstand – Padding
- Rahmen – Border
- CSS Float Modell
- CSS Selektoren
- CSS Maßeinheiten
Inhaltsübersicht CSS Grundlagen
Eigenschaften für Text
Farben und Hintergründe definieren
Grundlagen Box-Modell?
Box-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 »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.
| 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
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.
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 (Deutsch: Breite) nicht angegeben 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 (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.