Milliseid position: sticky omadusi teate?

position: sticky – see on hübriid position: relative ja position: fixed vahel.

• Vaikimisi käitumine: Element käitub nagu position: relative, jäädes dokumendi tavapärases voos.
• Kerides: Kui element jõuab määratud nihke (näiteks top: 0) oma kerimiskonteineris või vaatepiirkonnas (scrollport), "liimib" see ja käitub nagu position: fixed, jäädes nähtavaks selles asukohas edasi kerides.
• Nihke määramine: Nihke määratakse top, right, bottom, left omadustega. Selleks, et sticky korralikult töötaks, peab kasutama vähemalt ühte neist.
• Kerimiskonteiner (scroll container/containing block): Element "liimib" oma vanema formaadiboksi (containing block), mis tavaliselt on lähim vanem, kellel on kerimise võimalus või määratletud formaadikontext. Kui keritakse ainult body/html, siis liimimine toimub vaatepiirkonna suhtes.
• Kattumine: Liimitud element võib katta selle all oleva sisu, sarnaselt position: fixed-iga.
• Z-indeks: Kattumise käitumist mõjutab z-index omadus.
• Piirangud:
  • Ei tööta, kui vanemelementil on overflow: hidden, overflow: auto või overflow: scroll, mis lõikavad sisu.
  • Element võib "lõdvestuda", kui jõuab oma kerimiskonteineri äärteni.
• Kasutamine: Sageli kasutatakse "liimsete" tabeli päiste, navigeerimispaneelide või külgpaneelide loomisel, mis jäävad nähtavaks, kerides põhisisu.

/* Kasutamise näide */
.sticky-header {
  position: sticky;
  top: 0; /* Liimib kerimispaneeli või vaatepiirkonna ülaossa */
  background-color: white;
  padding: 10px;
  z-index: 10; /* Tagab, et pealkiri on teiste sisu elementide kohal */
}