Как зафиксировать элемент вверху "контейнера" при скролле?

Элемент фиксируют вверху контейнера при скролле через `position: sticky` с `top: 0` — он ведёт себя как обычный, пока не достигнет порога, затем «прилипает».

position: sticky

.sticky-header {
  position: sticky;
  top: 0; /* прилипнет к верху при достижении этой позиции */
}

Элемент прокручивается вместе с контентом, пока не дойдёт до top: 0 относительно контейнера прокрутки, затем фиксируется там, пока родитель виден.

Как работает

• До порога — ведёт себя как relative (в потоке).
• После достижения top — как fixed (прилипает).
• Прилипание ограничено родительским контейнером: когда родитель уходит из вида, элемент уходит с ним.

.section {
  /* родитель */
}
.section h2 {
  position: sticky;
  top: 0; /* заголовок прилипает, пока видна его секция */
}

Требования и нюансы

• Нужен порог (top, bottom, left или right).
• Sticky прилипает к ближайшему предку с overflow (auto/scroll/hidden): если overflow задан у промежуточного предка, который сам не прокручивается, sticky «не работает».
• Прилипание внутри высоты родителя — не выходит за него.

sticky против fixed

• sticky — прилипает в пределах родителя, участвует в потоке.
• fixed — всегда относительно viewport, вне потока, не ограничен родителем.

Коротко для собеседования

Элемент фиксируют вверху при скролле через position: sticky; top: 0 — он в потоке до достижения порога, затем прилипает, пока виден родитель. Нужен порог (top), без overflow у промежуточных непрокручиваемых предков. Отличается от fixed (всегда относительно viewport, вне потока, без привязки к родителю). Для липких заголовков секций/навигации.