Wie funktioniert position: sticky wirklich, und warum schlägt es manchmal fehl?

Question

Accepted Answer

`position: sticky` ist ein Hybrid: Ein Element verhält sich wie `relative` (bleibt im normalen Fluss) **bis** es zu einem von Ihnen angegebenen Schwellwert scrollt, dann verhält es sich wie `fixed` (bleibt an Ort und Stelle) — aber nur, während sein **Containing Block** noch auf dem Bildschirm sichtbar ist.

```css
.section-header {
  position: sticky;
  top: 0;        /* sticks when its top edge reaches the viewport top */
}
```

Der `top`-Wert (oder `bottom`/`left`/`right`) ist **erforderlich** — er definiert den Schwellwert. Ohne ihn funktioniert sticky nicht.

## Der Geltungsbereich: Es klebt nur innerhalb seines übergeordneten Elements

Ein sticky-Element ist auf seinen **übergeordneten Container** beschränkt. Es bleibt hängen, während man *durch* diesen übergeordneten Container scrollt, und scrollt dann weg, sobald die untere Kante des übergeordneten Elements vorbei ist. Dies ist das Prinzip hinter "sticky Section Headers" — jeder Header bleibt nur hängen, während sein eigener Bereich sichtbar ist.

## Warum es häufig "nicht funktioniert" — die Fehlerfälle

**1. Ein Vorfahren-Element hat `overflow: hidden/auto/scroll`.** Dies ist die #1 Ursache. Sticky-Positionierung wird durch jeden scrollbaren Vorfahren unterbrochen, da sich das Element relativ zu *diesem* Scroll-Container verhält, nicht relativ zur Seite:

```css
.wrapper { overflow: hidden; } /* ❌ silently kills sticky on descendants */
```

**2. Das übergeordnete Element ist nicht hoch genug.** Sticky funktioniert nur, wenn das übergeordnete Element höher ist als das sticky-Element — wenn das übergeordnete Element gleich hoch ist, gibt es nichts zum Durchscrollen, sodass es nie zum Kleben kommt.

**3. Kein Schwellwert festgelegt.** Wenn Sie `top`/`bottom` vergessen, gibt es keinen Haftungspunkt.

**4. Höhenbeschränkungen des übergeordneten Elements** (z. B. ein Flex-Elternteil, das Elemente dehnt) können auch den Scrollplatz entfernen.

## Debugging-Checkliste

```text
✓ Did I set top/bottom/left/right?
✓ Does ANY ancestor have overflow other than visible?
✓ Is the parent container taller than the sticky element?
```

## Warum es wichtig ist

`position: sticky` ermöglicht sticky Header, Tabellen-Header, Sidebars und "Scrollspy"-Benutzeroberflächen ohne JavaScript.

Aber seine Besonderheiten — besonders dass ein `overflow` auf *einem beliebigen* Vorfahren es stillschweigend bricht — machen es zu einer häufigen Quelle für "Warum klebt das nicht?"-Debugging.

Wenn Sie den Containing-Block-Geltungsbereich und die Overflow-Falle verstehen, können Sie es zuverlässig einsetzen.