Positionierung: relative, absolute, fixed, sticky

Standardmäßig folgen Elemente dem normalen Dokumentfluss: Blockelemente werden vertikal gestapelt, Inline-Elemente fließen innerhalb des Textes horizontal. Mit der position-Eigenschaft können Sie diesen Fluss für Overlays, fixierte Header und Tooltips verlassen.

Jedes Element beginnt mit position: static. Das bedeutet, dass es durch den normalen Dokumentfluss positioniert wird. Die Eigenschaften top, right, bottom und left haben bei statischen Elementen keine Wirkung.

position: relative belässt das Element im normalen Fluss, ermöglicht aber, es mithilfe von top, right, bottom und left von seiner ursprünglichen Position zu versetzen. Entscheidend ist, dass dadurch ein Positionierungskontext für absolut positionierte Nachfahren entsteht.

position: absolute entfernt das Element aus dem normalen Dokumentfluss. Es wird relativ zu seinem nächsten positionierten Vorfahren positioniert (jede Position außer static). Gibt es keinen positionierten Vorfahren, wird es relativ zum Viewport positioniert.

Positionierte Elemente können sich überlappen. Verwenden Sie z-index, um die Stapelreihenfolge zu steuern. Ein höherer z-index liegt weiter oben. Das funktioniert nur bei positionierten Elementen (nicht bei static). Dadurch wird ein neuer Stapelkontext erstellt.

position: fixed entfernt das Element aus dem normalen Dokumentfluss und verankert es im Viewport. Es scrollt nicht mit der Seite. Ideal für fixierte Header, schwebende Aktionsschaltflächen und Cookie-Banner.

position: sticky ist eine Kombination aus zwei Verhalten: Das Element scrollt mit der Seite, bis es einen Schwellenwert erreicht (festgelegt mit top/bottom), und bleibt dann dort haften. Das ist nützlich für Abschnittsüberschriften in langen Tabellen oder Seitenleisten, die nach dem Header haften bleiben.

Eine klassische Technik: Kombinieren Sie position: absolute; top: 50%; left: 50% mit transform: translate(-50%, -50%), um ein Element im positionierten Elternelement exakt zu zentrieren.

Ein absolut positioniertes Kind kann standardmäßig über die Grenzen seines Elternelements hinausragen. Wenn Sie dem Elternelement overflow: hidden hinzufügen, wird alles außerhalb seines Bereichs abgeschnitten – nützlich für Bildeffekte in Karten und zum Beschneiden von Badges.

Einige Eigenschaften erstellen unbeabsichtigt Stapelkontexte: transform, filter, isolation: isolate. Das kann zu z-index-Konflikten führen: Ein Element mit z-index: 9999 liegt möglicherweise trotzdem hinter einem anderen, weil es sich in einem niedrigeren Stapelkontext befindet.

relative: für Versätze und als Positionierungskontext. absolute: für Badges, Tooltips und Overlays relativ zu einem Elternelement. fixed: für dauerhaft sichtbare Header, Modalfenster und Toasts. sticky: für Abschnittsüberschriften und Seitennavigation, die dem Scrollen folgt. Verwenden Sie position nicht für Layouts – nutzen Sie Flex oder Grid.

Ein Element hat position: absolute; top: 0; right: 0;. Wo wird es angezeigt, wenn sein Elternelement position: relative hat?

static ist die Standardeinstellung. relative verschiebt ein Element, ohne es aus dem Dokumentfluss zu entfernen, und erstellt einen Positionierungskontext. absolute entfernt es aus dem Dokumentfluss und positioniert es relativ zum nächsten positionierten Vorfahren. fixed bleibt am Viewport verankert. sticky scrollt zunächst mit und bleibt dann haften. Verwenden Sie z-index, um die Reihenfolge überlappender Elemente zu steuern.