Kaip iš tikrųjų veikia position: sticky ir kodėl jis kartais nepavyksta?

Question

Accepted Answer

`position: sticky` yra hibridinis: elementas elgiasi kaip `relative` (lieka normaliam srautui) **kol nuo** jis nepaslenka iki jūsų nurodytos ribos, tada elgiasi kaip `fixed` (lieka vietoje) — bet tik kol jo **turinio blokas** vis dar matomas ekrane.

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

Reikšmė `top` (arba `bottom`/`left`/`right`) yra **reikalinga** — ji nusako ribą. Be jos, sticky nieko nedaro.

## Aprėptis: jis lieka tik savo tėviniame elemente

Lizdinis elementas yra apribotas savo **tėvinės konteineryje**. Jis lieka šios tėvinės dalies slinkimo metu, tada nueina, kai tėvinės apačia peršoka ekrano dalį. Tai yra tai, kas daro "lizdines sekcijos antraštes" veikiančiomis — kiekvienas antraštis lieka tik kol jo sekcija yra matoma.

## Kodėl jis dažnai "neveikia" — gedimo atvejai

**1. Pirmtako elementas turi `overflow: hidden/auto/scroll`.** Tai yra #1 priežastis. Lizdinis padėjimas nutrūksta dėl bet kurio slenkamo pirmtako, nes elementas lieka santykinis su *tuo* slinkamų konteineriu, o ne puslapiu:

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

**2. Tėvinė nepakankamai aukšta.** Lizdinis gali likti tik jei tėvinė yra aukštesnė nei lizdinis elementas — jei tėvinė yra tos pačios aukšties, nėra ko slinkti, todėl jis niekada nenukrenta.

**3. Nėra nustatytos ribos.** Pamiršus `top`/`bottom` reiškia jog nėra lizdinio taško.

**4. Aukščio apribojimai tėvinėje** (pvz., flex tėvinė, kuri ištempia elementus) taip pat gali pašalinti slinkamos vietos.

## Derinimo sąrašas

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

## Kodėl tai svarbu

`position: sticky` daro lizdines antraštes, lentelės antraštes, šonus ir "scrollspy" UI be JavaScript.

Bet jo keistenybės — ypač tai, kad `overflow` ant *bet kurio* pirmtako tyliai jį sulaužo — daro jį dažnu "kodėl tai nelipdi?" derinimo šaltiniu.

Zinant turinio bloko aprėptį ir overflow spąstus yra tai, kas leidžia jums jį naudoti patikimai.