Ce caracteristici ale proprietății position: sticky cunoști?

position: sticky – este un amestec între position: relative și position: fixed.

• Comportament implicit: Elementul se comportă ca și cu position: relative, rămânând în fluxul normal al documentului.
• La derulare: Când elementul atinge o deplasare definită (de exemplu, top: 0) față de containerul său de derulare sau zona de vizualizare (viewport), "se lipește" și se comportă ca și cu position: fixed, rămânând vizibil în acea poziție în timpul derulării.
• Deplasare: Se setează prin proprietățile top, right, bottom, left. Este necesar să se folosească cel puțin una dintre aceste proprietăți pentru ca sticky să funcționeze corect.
• Container de derulare (scroll container/containing block): Elementul "se lipește" în limitele blocului său de formatare părinte (containing block), care de obicei corespunde celui mai apropiat strămoș cu capacitate de derulare sau un anumit context de formatare. Dacă doar body/html derulează, lipirea va fi față de zona de vizualizare.
• Suprapunere: Elementul "lipicios" poate suprapune conținutul de dedesubt, similar cu un element cu position: fixed.
• Z-index: Comportamentul de suprapunere este influențat de proprietatea z-index.
• Restricții:
  • Nu funcționează dacă elementul părinte are overflow: hidden, overflow: auto sau overflow: scroll, care taie conținutul.
  • Elementul poate "se desprinde" dacă atinge marginea containerului său de derulare.
• Utilizare: Este frecvent folosit pentru a crea anteturi "lipicioase" în tabele, panouri de navigare sau elemente laterale care rămân vizibile în timpul derulării conținutului principal.

/* Exemplu de utilizare */
.sticky-header {
  position: sticky;
  top: 0; /* Se lipește de partea superioară a zonei de vizualizare sau containerului */
  background-color: white;
  padding: 10px;
  z-index: 10; /* Asigură că antetul este deasupra altor conținuturi */
}