Jak vlastně funguje `position: sticky` a proč někdy selhává?

Question

Accepted Answer

`position: sticky` je hybrid: element se chová jako `relative` (zůstává v běžném toku) **dokud** se neposunuje na práh, který zadáte, pak se chová jako `fixed` (přilepí se) — ale pouze **pokud je jeho obsahující blok** stále na obrazovce.

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

Hodnota `top` (nebo `bottom`/`left`/`right`) je **povinná** — definuje práh. Bez ní sticky nedělá nic.

## Rozsah: lepit se pouze v rámci svého rodiče

Sticky element je omezen na svůj **rodičovský kontejner**. Lepí se během posouvání *skrz* toho rodiče, pak se posune pryč, jakmile spodní část rodiče projde. Právě to umožňuje fungování "sticky záhlaví sekcí" — každé záhlaví se leží jen pokud je jeho vlastní sekce viditelná.

## Proč to běžně "nefunguje" — případy selhání

**1. Předek má `overflow: hidden/auto/scroll`.** To je příčina č. 1. Sticky pozicování je porušeno libovolným posunovacím předkem, protože se element leí relativně k *tomu* kontejneru scroll, ne k stránce:

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

**2. Rodič není dostatečně vysoký.** Sticky funguje pouze pokud je rodič vyšší než sticky element — pokud je rodič stejné výšky, není nic k posouvání, takže se nikdy nezdá, že by se lePI.

**3. Není nastaven žádný práh.** Zapomenutí `top`/`bottom` znamená žádný bod lepení.

**4. Omezení výšky na rodiči** (např. flex rodič natahující prvky) mohou také odstranit prostor pro posouvání.

## Kontrolní seznam ladění

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

## Proč je to důležité

`position: sticky` posiluje sticky záhlaví, záhlaví tabulek, postranní panely a "scrollspy" UI bez JavaScriptu.

Ale jeho zvláštnosti — zvláště když `overflow` na *jakémkoli* předkovi to tiše poruší — z toho činí časté zdroje ladění "proč se to nelepí?".

Znalost rozsahu obsahujícího bloku a pasti overflow je to, co vám umožňuje jej používat spolehlivě.