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

position: sticky – това е хибрид между position: relative и position: fixed.

• По подразбиране: Елементът се държи като с position: relative, оставайки в нормалния поток на документа.
• При превъртане: Когато елементът достигне зададено изместване (например, top: 0) спрямо своя скрол контейнер или областта за гледане (viewport), той "залепва" и се държи като с position: fixed, оставайки видим на тази позиция при по-нататъшно превъртане.
• Изместване: Задава се чрез свойствата top, right, bottom, left. Необходимо е да се използва поне едно от тези свойства за правилна работа на sticky.
• Контейнер за скролиране (scroll container/containing block): Елементът "залепва" в границите на своя родителски блок (containing block), който обикновено съвпада с най-близкия предшественик с възможност за скролиране или определен контекст за форматиране. Ако се скролира само body/html, залепването ще е спрямо областта за гледане.
• Прекъсване: Залепеният елемент може да прекъсне, ако достигне ръба на своя скрол контейнер.
• Използване: Често се използва за създаване на "залепващи" заглавия на таблици, навигационни панели или странични елементи, които остават видими при превъртане на основното съдържание.

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