Interaktive Erklärungen und Beispiele
Die position-Eigenschaft definiert, wie ein Element im Dokument positioniert wird. Unten finden Sie Erklärungen zu jedem Positionierungstyp und können die Werte live ändern.
Standardpositionierung. Elemente folgen dem normalen Dokumentenfluss.
Bei position: static haben top, left, right und bottom keine Wirkung. Das Element verbleibt im normalen Dokumentenfluss.
Element wird relativ zu seiner normalen Position im Dokumentenfluss positioniert.
Bei position: relative wird das Element relativ zu seiner normalen Position verschoben. Der ursprüngliche Platz im Dokumentenfluss bleibt reserviert.
Element wird relativ zum nächsten positionierten Vorfahren positioniert.
Bei position: absolute wird das Element aus dem normalen Dokumentenfluss entfernt und relativ zum nächsten positionierten Elternelement (position nicht static) platziert.
Element wird relativ zum Viewport positioniert und bleibt beim Scrollen an derselben Stelle.
Hinweis: Fixed-Elemente sind relativ zum Viewport positioniert. Öffnen Sie die Browser-DevTools, um den Effekt im Seitenkontext zu sehen.
Bei position: fixed wird das Element relativ zum Viewport positioniert. Es bleibt auch beim Scrollen an derselben Stelle. Der ursprüngliche Platz im Dokumentenfluss wird nicht reserviert.
Kombination aus relative und fixed. Wechselt je nach Scrollposition.
Scrollen Sie in diesem Bereich, um den Sticky-Effekt zu sehen:
Bei position: sticky verhält sich das Element zunächst wie relative, wechselt aber bei Erreichen einer bestimmten Scrollposition zu fixed.