Jaké vlastnosti vlastnosti position: sticky znáte?

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

• Výchozí chování: Prvek se chová jako s position: relative, zůstává v normálním toku dokumentu.
• Při posunu: Když prvek dosáhne definovaného posunu (například top: 0) vzhledem ke svému posuvnému kontejneru nebo oblasti zobrazení (viewport), "přilepí" se a chová se jako s position: fixed, zůstává viditelný na této pozici při dalším posunu.
• Posun: Je nastaven vlastnostmi top, right, bottom, left. Pro správnou funkci sticky je nutné použít alespoň jednu z těchto vlastností.
• Posuvný kontejner (scroll container/containing block): Prvek "přilepí" v rámci svých rodičovských bloků (containing block), což je obvykle nejbližší předek s možností posunu nebo s definovaným kontextem formátování. Pokud se posouvá pouze body/html, bude přilepení vzhledem k oblasti zobrazení.
• Překrývání: Přilepený prvek může překrývat obsah pod ním, podobně jako prvek s position: fixed.
• Z-index: Chování překrývání je ovlivněno vlastností z-index.
• Omezení:
  • Nefunguje, pokud rodičovský prvek má overflow: hidden, overflow: auto nebo overflow: scroll, které oříznou obsah.
  • Prvek se může "odlepit", pokud dosáhne okraje svého posuvného kontejneru.
• Použití: Často se používá k vytvoření "přilepených" záhlaví tabulek, navigačních panelů nebo bočních prvků, které zůstávají viditelné při posunu hlavního obsahu.

/* Příklad použití */
.sticky-header {
  position: sticky;
  top: 0; /* Přilepí se k horní části viewportu nebo kontejneru */
  background-color: white;
  padding: 10px;
  z-index: 10; /* Zajistí, že záhlaví bude nad ostatním obsahem */
}