Koje osobine svojstva position: sticky poznajete?

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, залепање ће бити у односу на област за приказ.
• Преклапање: Залепљени елемент може преклапати садржај испод њега, слично као елемент са 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; /* Обезбеђује да заглавље буде изнад другог садржаја */
}