Cum funcționează de fapt position: sticky, și de ce eșuează uneori?

Question

Accepted Answer

`position: sticky` este o hibridare: un element se comportă ca `relative` (rămâne în fluxul normal) **până** când se derulează la un prag pe care tu îl specifici, apoi se comportă ca `fixed` (rămâne fixat) — dar doar atâta timp cât **blocul care îl conține** este încă vizibil pe ecran.

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

Valoarea `top` (sau `bottom`/`left`/`right`) este **obligatorie** — definește pragul. Fără aceasta, sticky nu face nimic.

## Domeniul de aplicare: se lipește doar în cadrul părintelui

Un element sticky este confinat la **containerul său părinte**. Se lipește atunci când se derulează *prin* acel părinte, apoi se derulează la rândul lui după ce marginea inferioară a părintelui trece. Aceasta este ceea ce face ca "anteturile de secțiuni lipicioase" să funcționeze — fiecare antet se lipește doar atâta timp cât secțiunea sa proprie este vizibilă.

## De ce nu funcționează frecvent — cazurile de eșec

**1. Un strămoș are `overflow: hidden/auto/scroll`.** Aceasta este cea mai frecventă cauză. Poziționarea sticky este deteriorată de orice strămoș care permite derularea, deoarece elementul se lipește relativ la *acel* container de derulare, nu la pagină:

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

**2. Părintele nu este suficient de înalt.** Sticky funcționează doar dacă părintele este mai înalt decât elementul sticky — dacă părintele are aceeași înălțime, nu există nimic de derulat, deci nu pare niciodată să se lipească.

**3. Niciun prag nu este setat.** Uitarea `top`/`bottom` înseamnă că nu există niciun punct de lipire.

**4. Constrângeri de înălțime pe părinte** (de exemplu, un părinte flex care întinde elemente) pot de asemenea elimina spațiul de derulare.

## Checklist de depanare

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

## De ce este important

`position: sticky` alimentează antetele lipicioase, antetele de tabele, barele laterale și interfețe "scrollspy" fără JavaScript.

Dar particularitățile sale — mai ales că `overflow` pe *orice* strămoș o deteriorează în tăcere — o fac o sursă frecventă de debugging "de ce nu se lipește asta?".

Cunoașterea domeniului de aplicare al blocului care conține și a capcanei overflow este ceea ce te permite să o folosești în mod fiabil.