Какие особенности свойства position: sticky вы знаете?

position: sticky – это гибрид position: relative и position: fixed.

• Поведение по умолчанию: Элемент ведет себя как с position: relative, оставаясь в обычном потоке документа.
• При прокрутке: Когда элемент достигает заданного смещения (например, top: 0) относительно своего контейнера прокрутки или области видимости (скроллпорта), он "прилипает" и ведет себя как с position: fixed, оставаясь видимым в этой позиции при дальнейшей прокрутке.
• Смещение: Смещение задается свойствами top, right, bottom, left. Необходимо использовать хотя бы одно из этих свойств для корректной работы sticky.
• Контейнер прокрутки (scroll container/containing block): Элемент "прилипает" в пределах своего родительского блока форматирования (containing block), который обычно совпадает с ближайшим предком, имеющим возможность скроллинга или определенный контекст форматирования. Если скроллится только body/html, то прилипание будет относительно области видимости.
• Перекрытие: Прилипший элемент может перекрывать содержимое под ним, подобно элементу с position: fixed.
• Z-индекс: На поведение при перекрытии влияет свойство z-index.
• Ограничения:
  • Не работает, если родительский элемент имеет overflow: hidden, overflow: auto или overflow: scroll, которые обрезают содержимое.
  • Элемент может "отлипнуть", если достигает края своего контейнера прокрутки.
• Использование: Часто применяется для создания "липких" заголовков таблиц, навигационных панелей или боковых элементов, которые остаются видимыми при прокрутке основной части контента.

/* Пример использования */
.sticky-header {
  position: sticky;
  top: 0; /* Прилипает к верху скроллпорта или контейнера */
  background-color: white;
  padding: 10px;
  z-index: 10; /* Гарантирует, что заголовок поверх другого контента */
}