Aké vlastnosti vlastnosti position: sticky poznáte?

position: sticky – je hybrid medzi position: relative a position: fixed.

• Predvolené správanie: Prvok sa správa ako s position: relative, zostáva v normálnom toku dokumentu.
• Po posúvaní: Keď prvok dosiahne definované posunutie (napríklad, top: 0) voči svojmu posúvaciemu kontajneru alebo oblasti zobrazenia (viewport), "lepí" sa a správa sa ako s position: fixed, zostáva viditeľný na tejto pozícii pri ďalšom posúvaní.
• Posunutie: Je nastavené vlastnosťami top, right, bottom, left. Na správnu funkciu sticky je potrebné použiť aspoň jednu z týchto vlastností.
• Posúvací kontajner (scroll container/containing block): Prvok "lepí" v rámci hraníc svojho rodičovského bloku (containing block), ktorý zvyčajne zodpovedá najbližšiemu predkovi s možnosťou posúvania alebo s definovaným kontextom formátovania. Ak sa posúva iba body/html, bude lepenie vo vzťahu k oblasti zobrazenia.
• Prekrývanie: Lepiaci prvok môže prekrývať obsah pod ním, podobne ako prvok s position: fixed.
• Z-index: Správanie prekrývania je ovplyvnené vlastnosťou z-index.
• Obmedzenia:
  • Nefunguje, ak rodičovský prvok má overflow: hidden, overflow: auto alebo overflow: scroll, ktoré orezávajú obsah.
  • Prvok sa môže "odlepiť", ak dosiahne okraj svojho posúvacieho kontajnera.
• Použitie: Často sa používa na vytváranie "lepivých" hlavičiek tabuliek, navigačných panelov alebo bočných prvkov, ktoré zostávajú viditeľné pri posúvaní hlavného obsahu.

/* Príklad použitia */
.sticky-header {
  position: sticky;
  top: 0; /* Lepí sa k hornej časti viewportu alebo kontajnera */
  background-color: white;
  padding: 10px;
  z-index: 10; /* Zabezpečuje, že hlavička je nad iným obsahom */
}