Hur fungerar position: sticky egentligen, och varför misslyckas det ibland?

Question

Accepted Answer

`position: sticky` är ett hybrid-koncept: ett element beter sig som `relative` (stannar i normalt flöde) **tills** det scrollas till ett tröskelvärde du anger, då beter det sig som `fixed` (sticker på plats) — men endast medan dess **containing block** fortfarande är synligt på skärmen.

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

Värdet `top` (eller `bottom`/`left`/`right`) är **obligatoriskt** — det definierar tröskelvärdet. Utan det gör sticky ingenting.

## Omfattningen: det sticker endast inom sin förälder

Ett sticky-element är begränsat till sin **föräldracontainer**. Det sticker medan du scrollar *genom* föräldern, sedan scrollas det bort när förälderns botten passerar. Detta är vad som gör att "sticky section headers" fungerar — varje rubrik sticker endast medan dess egen sektion är synlig.

## Varför det ofta "inte fungerar" — felen

**1. En förfader har `overflow: hidden/auto/scroll`.** Detta är orsak #1. Sticky-positionering brytes av vilken scrollbar-förfader som helst, eftersom elementet sticker relativt *denna* scroll-container, inte sidan:

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

**2. Föräldern är inte tillräckligt stor.** Sticky har endast utrymme att stäcka om föräldern är större än sticky-elementet — om föräldern är samma höjd finns det inget att scrolla genom, så det verkar aldrig stäcka.

**3. Inget tröskelvärde satt.** Att glömma `top`/`bottom` betyder ingen stick-punkt.

**4. Höjdbegränsningar på föräldern** (t.ex. en flex-förfader som sträcker objekt) kan också ta bort scroll-utrymmet.

## Felsökningschecklista

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

## Varför det spelar roll

`position: sticky` möjliggör sticky-headers, tabellhuvuden, sidofält och "scrollspy"-gränssnitt utan JavaScript.

Men dess udda egenskaper — särskilt att en `overflow` på *vilken* förfader som helst tyst bryter det — gör det till en frekvent källa för "varför sticker det inte?" felsökning.

Att känna till containing-block-omfattningen och overflow-fällan är vad som låter dig använda det på ett tillförlitligt sätt.