Kokias savybes žinote apie pozicijos: sticky savybę?

position: sticky – tai hibridas tarp position: relative ir position: fixed.

• Numatytasis elgesys: Elementas elgiasi kaip position: relative, likdamas įprastoje dokumento srauto dalyje.
• Slenkant: Kai elementas pasiekia nustatytą poslinkį (pavyzdžiui, top: 0) savo slinkties konteineryje arba matymo srityje (scrollport), jis "prilipsta" ir elgiasi kaip position: fixed, likdamas matomas šioje pozicijoje toliau slenkant.
• Poslinkis: Poslinkis nustatomas top, right, bottom, left savybėmis. Būtina naudoti bent vieną iš jų, kad sticky veiktų tinkamai.
• Slinkties konteineris (scroll container/containing block): Elementas "prilipsta" savo tėvų formatavimo bloke (containing block), kuris dažniausiai sutampa su artimiausiu tėvu, turinčiu slinkimo galimybę arba tam tikrą formatavimo kontekstą. Jei slenka tik body/html, prilipimas bus susijęs su matymo sritimi.
• Perkirtimas: Prilipęs elementas gali perklijuoti žemiau esančią turinį, panašiai kaip position: fixed.
• Z-indeksas: Perkirtimo elgseną veikia z-index savybė.
• Apribojimai:
  • Nefunkcionuoja, jei tėvų elementas turi overflow: hidden, overflow: auto arba overflow: scroll, kurie apkarpo turinį.
  • Elementas gali "atsipalaiduoti", jei pasiekia savo slinkties konteinerio kraštą.
• Naudojimas: Dažnai naudojamas kuriant "lipnius" lentelių antraščių, navigacijos panelių ar šoninių elementų, kurie lieka matomi slenkant pagrindinį turinį.

/* Pavyzdys naudojimo */
.sticky-header {
  position: sticky;
  top: 0; /* Prilipsta prie viršaus slinkties konteineryje arba viewport'e */
  background-color: white;
  padding: 10px;
  z-index: 10; /* Užtikrina, kad antraštė bus virš kitų turinio elementų */
}