Quali caratteristiche della proprietà position: sticky conosci?

position: sticky – è un ibrido tra position: relative e position: fixed.

• Comportamento predefinito: L'elemento si comporta come con position: relative, rimanendo nel flusso normale del documento.
• Durante lo scorrimento: Quando l'elemento raggiunge uno spostamento definito (ad esempio, top: 0) rispetto al suo contenitore di scorrimento o all'area di visualizzazione (viewport), si "attacca" e si comporta come con position: fixed, rimanendo visibile in quella posizione durante lo scorrimento.
• Spostamento: È impostato dalle proprietà top, right, bottom, left. È necessario usare almeno una di queste proprietà affinché sticky funzioni correttamente.
• Contenitore di scorrimento (scroll container/containing block): L'elemento "si attacca" entro i limiti del suo blocco di formattazione genitore (containing block), che di solito corrisponde al più vicino antenato con capacità di scorrimento o un contesto di formattazione definito. Se si scorre solo body/html, l'adesione sarà rispetto all'area di visualizzazione.
• Sovrapposizione: L'elemento "appiccicoso" può sovrapporre il contenuto sottostante, come un elemento con position: fixed.
• Z-index: Il comportamento di sovrapposizione è influenzato dalla proprietà z-index.
• Limitazioni:
  • Non funziona se l'elemento genitore ha overflow: hidden, overflow: auto o overflow: scroll, che tagliano il contenuto.
  • L'elemento può "staccarsi" se raggiunge il bordo del suo contenitore di scorrimento.
• Utilizzo: Spesso usato per creare intestazioni "appiccicose" in tabelle, pannelli di navigazione o elementi laterali che rimangono visibili durante lo scorrimento del contenuto principale.

/* Esempio di utilizzo */
.sticky-header {
  position: sticky;
  top: 0; /* Si attacca alla parte superiore del viewport o del contenitore */
  background-color: white;
  padding: 10px;
  z-index: 10; /* Garantisce che l'intestazione sia sopra altri contenuti */
}