Kuinka `position: sticky` todella toimii, ja miksi se joskus epäonnistuu?

Question

Accepted Answer

`position: sticky` on hybridi: elementti käyttäytyy kuin `relative` (pysyy normaalissa virrassa) **kunnes** se vieritetään määrittämääsi kynnysarvoon, jolloin se käyttäytyy kuin `fixed` (kiinnittyy paikalleen) — mutta vain **kun sen sisältävä lohko** on vielä näytöllä.

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

`top` (tai `bottom`/`left`/`right`) arvo on **pakollinen** — se määrittää kynnysarvon. Ilman sitä sticky ei tee mitään.

## Soveltamisalue: se kiinnittyy vain vanhemmansa sisällä

Jäykä elementti on rajoitettu **vanhempi säiliöön**. Se kiinnittyy vieritettäessä *läpi* kyseisen vanhemman, sitten vierityy pois, kun vanhemman alaosa ohittaa. Tämä on se, mikä tekee "kiinteistä osion otsikoista" toimivia — jokainen otsikko kiinnittyy vain silloin, kun sen oma osio on näkyvissä.

## Miksi se yleensä "ei toimi" — vikaantumisen tapaukset

**1. Esikko omaa `overflow: hidden/auto/scroll`.** Tämä on syy #1. Sticky-sijoitus rikkoutuu minkä tahansa vierittävän esikon vuoksi, koska elementti kiinnittyy suhteessa *siihen* vierityysäiliöön, ei sivuun:

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

**2. Vanhempi ei ole riittävän korkea.** Sticky toimii vain, jos vanhempi on korkeampi kuin sticky-elementti — jos vanhemmalla on sama korkeus, ei ole mitään vierittää, joten se ei koskaan näytä kiinnittyvän.

**3. Kynnysarvoa ei ole asetettu.** `top`/`bottom` unohtaminen tarkoittaa, että ei ole kiinnityskohtaa.

**4. Vanhemman korkeudet rajoitukset** (esim. flex-vanhempi, joka venyttää elementtejä) voivat myös poistaa vieritystilan.

## Vianselvityksen tarkistuslista

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

## Miksi se on tärkeää

`position: sticky` tehostaa kiinteitä otsikoita, taulukon otsikoita, sivupalkkeja ja "scrollspy" käyttöliittymiä ilman JavaScriptiä.

Mutta sen omituaisuudet — erityisesti se, että *minkä tahansa* esikon `overflow` rikkoutuu hiljaa — tekevät siitä usein lähteen "miksi se ei kiinni?" vianselvitystä.

Sisältävän lohkon soveltamisalan ja overflow-ansaan tunteminen on se, mikä antaa sinulle mahdollisuuden käyttää sitä luotettavasti.