CSS Position

CSS Minimum und Maximum Werte CSS Z-Index

Die position-Eigenschaft bestimmt, wie ein Element im Dokumentfluss platziert wird. Sie ist eines der wichtigsten Werkzeuge für das Layout und die Feinabstimmung der Anordnung.

Position-Werte

CSS position kann mehrere Werte annehmen, die jeweils unterschiedlich auf das Layout wirken.

Wert	Beschreibung
static	Standardwert. Das Element bleibt im normalen Dokumentfluss.
relative	Das Element wird relativ zu seiner normalen Position verschoben, basierend auf top, left, right, bottom.
absolute	Das Element wird relativ zum ersten nicht-statischen Elternelement positioniert.
fixed	Das Element bleibt relativ zum Browserfenster fixiert und bewegt sich beim Scrollen nicht.
sticky	Das Element bleibt beim Scrollen eine Zeit lang fixiert und kehrt dann in den normalen Fluss zurück.

Absolute Positionierung

Absolute Positionierung ermöglicht es, genau festzulegen, wo ein Element innerhalb des Elternelements platziert wird.

Im obigen Beispiel befindet sich die rote Box in der oberen rechten Ecke der grauen Elternbox.

Sticky-Position

Die Sticky-Position ist nützlich für Navigationsleisten, da das Element beim Scrollen oben auf dem Bildschirm bleibt und später in den Fluss zurückkehrt.

Tipps zur Verwendung von position

Die richtige Verwendung von position ist entscheidend für präzise und responsive Layouts.

Gib dem Elternteil immer position: relative, wenn du ein absolut positioniertes Kind platzieren willst.
Verwende fixed vorsichtig, da es Inhalte beim Scrollen überdecken kann.
Sticky ist besonders nützlich für Navigationsleisten und Header.