Hvordan fungerer position: sticky egentlig, og hvorfor slutter den å fungere noen ganger?

Question

IT Interview Practice · Accepted Answer

`position: sticky` er en hybrid: et element oppfører seg som `relative` (forblir i normal flyt) **inntil** det ruller til en terskel du angir, deretter oppfører det seg som `fixed` (fester seg på plass) — men bare mens dets **containing block** fortsatt er på skjermen.

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

Verdien `top` (eller `bottom`/`left`/`right`) er **påkrevd** — den definerer terskelen. Uten den gjør sticky ingenting.

## Omfanget: det fester seg bare innenfor sin forelder

Et sticky-element er begrenset til sin **parent-container**. Det fester seg mens du ruller *gjennom* den forelder-elementet, deretter ruller det bort når forelder-elementets bunn passerer. Dette er det som gjør at "sticky section headers" fungerer — hver header fester seg bare mens sin egen seksjon er i visning.

## Hvorfor det vanligvis "ikke fungerer" — feiltilfellene

**1. En forfar har `overflow: hidden/auto/scroll`.** Dette er årsak nummer 1. Sticky-posisjonering brytes av alle scrollbare forfedre, fordi elementet fester seg relativt til *den* scroll-containeren, ikke siden:

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

**2. Foreldren er ikke høy nok.** Sticky fungerer bare hvis foreldren er høyere enn sticky-elementet — hvis foreldren er samme høyde, er det ingenting å rulle gjennom, så det ser aldri ut til å feste seg.

**3. Ingen terskel satt.** Hvis du glemmer `top`/`bottom` betyr det ingen fastepunkt.

**4. Høyde-begrensninger på foreldren** (f.eks. en flex-forelder som strekker elementer) kan også fjerne scrollplassen.

## Feilsøkingskontrolliste

```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 er viktig

`position: sticky` driver sticky headers, tabellheaders, sidebars, og "scrollspy" UI-er uten JavaScript.

Men dens særheter — spesielt at en `overflow` på *en hvilken som helst* forfar stille bryter det — gjør det til en hyppig kilde til "hvorfor vil dette ikke feste seg?" feilsøking.

Å kjenne containing-block-omfanget og overflow-fellen er det som lar deg bruke den pålitelig.

Omfanget: det fester seg bare innenfor sin forelder

Hvorfor det vanligvis "ikke fungerer" — feiltilfellene

Feilsøkingskontrolliste

Hvorfor det er viktig

Relaterte spørsmål