position CSS-Eigenschaft (MDN)
Quelle / bibliografische Angaben
MDN-Referenz „position CSS property“, englische Fassung.
- Stand laut Seite: „last modified on Jul 26, 2026“
- URL: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/position, abgerufen 2026-09-12 (über Firecrawl)
- Ausgewertet mit Schwerpunkt auf
sticky;relative,absoluteundfixednur überflogen
Kurzfassung
position: sticky verhält sich wie relative, bis das Element beim Scrollen eine Schwelle erreicht, und bleibt dann „kleben“, bis es an den gegenüberliegenden Rand seines Containing Blocks stößt.
Kernaussagen
- Definition: Ein sticky positioniertes Element wird relativ positioniert behandelt, bis sein Containing Block eine Schwelle (etwa
topungleichauto) innerhalb seines Scroll-Containers überschreitet. Dann gilt es als „stuck“, bis es den gegenüberliegenden Rand seines Containing Blocks erreicht. - Schwelle Pflicht: Mindestens eine der Eigenschaften
top,right,bottomoderleftmuss gesetzt sein, sonst iststickynicht vonrelativezu unterscheiden. - Stapelkontext:
stickyerzeugt immer einen neuen Stacking Context. - Overflow-Falle: Ein sticky Element klebt am nächsten Vorfahren mit „Scroll-Mechanismus“ – den erzeugt
overflow: hidden,scroll,autooderoverlay–, auch wenn dieser Vorfahr gar nicht tatsächlich scrollt. - Barrierefreiheit und Performance: Sticky oder fixed Inhalte müssen beim Scrollen neu gezeichnet werden. Schafft das Gerät keine 60 fps, entsteht Ruckeln, das auch für empfindliche Menschen problematisch ist. MDN schlägt
will-change: transformvor, um das Element auf eine eigene Ebene zu legen. - Beispiel: alphabetische Liste mit sticky Überschriften, die jeweils von der nächsten Überschrift abgelöst werden.
Eigene Einordnung
Die Overflow-Falle ist in der Praxis der häufigste Grund, warum sticky „nicht funktioniert“. Der will-change-Tipp steht in Spannung zu web.dev, das will-change nur für Elemente empfiehlt, die sich tatsächlich bald ändern. Gemessen ist hier nichts.