Относительно чего работает sticky позиционирование

Sticky позиционирование работает относительно ближайшего родителя с прокруткой (overflow: hidden, scroll, auto, overlay). Если такого родителя нет — относительно viewport.

Пример:

.container {
  height: 200px;
  overflow-y: scroll; /* sticky будет работать внутри этого контейнера */
}

.sticky-element {
  position: sticky;
  top: 10px; /* отступ от верхней границы родителя */
}

Ключевые особенности:

1. Элемент остается в потоке документа
2. Переключается между relative и fixed позиционированием
3. Требует указания хотя бы одного значения (top, right, bottom, left)