position: sticky — это гибридное решение: элемент ведёт себя как relative (остаётся в обычном потоке) пока он не прокрутится до указанного вами порога, а затем ведёт себя как fixed (прилипает на месте) — но только пока его содержащий блок всё ещё видим на экране.
{
: sticky;
: ;
}
Значение top (или bottom/left/right) обязательно — оно определяет порог. Без него sticky не работает.
Липкий элемент ограничен своим родительским контейнером. Он прилипает во время прокрутки через этот родитель, а затем уходит со страницы, когда нижняя граница родителя проходит за край экрана. Именно так работают «липкие заголовки секций» — каждый заголовок прилипает только пока его собственная секция видима.
1. На предке установлен overflow: hidden/auto/scroll. Это главная причина. Липкое позиционирование ломается любым прокручиваемым предком, потому что элемент прилипает относительно этого контейнера прокрутки, а не страницы:
.wrapper { overflow: hidden; } /* ❌ silently kills sticky on descendants */
2. Родитель недостаточно высок. Sticky работает только если родитель выше, чем сам липкий элемент — если высота родителя совпадает с высотой элемента, то прокручиваться нечему, и элемент никогда не будет выглядеть прилипшим.
3. Не установлен порог. Забыли top/bottom — нет точки прилипания.
4. Ограничения высоты родителя (например, flex-родитель растягивающий элементы) также могут убрать место для прокрутки.
✓ Did I set top/bottom/left/right?
✓ Does ANY ancestor have overflow other than visible?
✓ Is the parent container taller than the sticky element?
position: sticky обеспечивает работу липких заголовков, заголовков таблиц, боковых панелей и «scrollspy» интерфейсов без JavaScript.
Но его особенности — особенно то, что overflow на любом предке молча его ломает — делают его частым источником отладки под вопросом «почему это не прилипает?».
Знание области действия содержащего блока и ловушки overflow — это то, что позволяет вам надёжно использовать это свойство.