Почему position: sticky ломается и как это чинить

position: sticky кажется простым, но в реальных проектах часто “не работает”. Почти всегда причина одна из этих.

1. У родителя есть overflow: hidden / auto / scroll
Sticky работает относительно ближайшего скролл-контейнера. Если у родителя overflow не visible, элемент перестаёт быть sticky.

2. Не задано смещение (top, bottom)
Без top: 0 (или другого значения) sticky не активируется вообще.

3. Родитель слишком маленький
Sticky элемент не может выйти за пределы родителя. Если высота контейнера меньше высоты sticky-элемента, эффекта не будет.

4. transform у родителя
transform, filter, perspective создают новый контекст. Sticky внутри такого блока часто ломается.

Мини-чеклист, если sticky не работает:
- есть ли top
- нет ли overflow у родителей
- нет ли transform
- хватает ли высоты контейнера

#полезности