Hvordan fungerer `position: sticky` egentlig, og hvorfor fejler det nogle gange?

Question

Accepted Answer

`position: sticky` er et hybrid: et element opfører sig som `relative` (forbliver i normal flow) **indtil** det bliver scrollet til en tærskel, du angiver, derefter opfører det sig som `fixed` (klæber fast) — men kun **mens dets indeholdende blok** stadig er på skærmen.

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

Værdien `top` (eller `bottom`/`left`/`right`) er **påkrævet** — den definerer tærskelen. Uden den gør sticky ingenting.

## Omfanget: det klæber kun inden for dets forælder

Et sticky element er begrænset til dets **overordnede beholder**. Det klæber mens du scroller *gennem* den forælder, derefter scrolles væk når forælderens bund passerer. Dette er hvad der gør "sticky sektionshoved" virker — hver header klæber kun mens dens egen sektion er synlig.

## Hvorfor det ofte "virker ikke" — fejltilfældene

**1. En forfader har `overflow: hidden/auto/scroll`.** Dette er årsag nr. 1. Sticky positionering brydes af ethvert scrollbart forfader, fordi elementet klæber i forhold til *det* scroll-beholder, ikke siden:

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

**2. Forælderen er ikke høj nok.** Sticky virker kun hvis forælderen er højere end sticky elementet — hvis forælderen har samme højde, er der intet at scrolle gennem, så det virker aldrig til at klæbe.

**3. Ingen tærskel indstillet.** At glemme `top`/`bottom` betyder intet klebepunkt.

**4. Højdebegrænsninger på forælderen** (f.eks. en flex forælder der strækker elementer) kan også fjerne scroll-rummet.

## Fejlfindingstjekliste

```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?
```

## Hvorfor det betyder noget

`position: sticky` driver sticky headers, tabelheaders, sidebars og "scrollspy" UI uden JavaScript.

Men dets særheder — især at en `overflow` på *enhver* forfader stiltiende bryder det — gør det til en hyppig kilde til fejlfinding af "hvorfor klæber det ikke?".

At kende det indeholdende blocks omfang og overflow-falden er det, der lader dig bruge det pålideligt.