position: sticky è un ibrido: un elemento si comporta come relative (rimane nel flusso normale) finché non scorre fino a una soglia che specifichi, poi si comporta come fixed (rimane fisso) — ma solo mentre il suo blocco contenitore è ancora visibile sullo schermo.
{
: sticky;
: ;
}
Il valore top (o bottom/left/right) è obbligatorio — definisce la soglia. Senza di esso, sticky non fa nulla.
Un elemento sticky è confinato al suo contenitore genitore. Rimane fisso mentre si scorre attraverso quel genitore, poi scorre via una volta che il fondo del genitore passa. Questo è ciò che rende possibile l'uso di "intestazioni di sezione sticky" — ogni intestazione rimane fissa solo mentre la sua sezione è visibile.
1. Un antenato ha overflow: hidden/auto/scroll. Questa è la causa #1. Il posizionamento sticky è rotto da qualsiasi antenato scorrevole, perché l'elemento rimane fisso relativamente a quel contenitore di scorrimento, non alla pagina:
.wrapper { overflow: hidden; } /* ❌ silently kills sticky on descendants */
2. Il genitore non è abbastanza alto. Sticky funziona solo se il genitore è più alto dell'elemento sticky — se il genitore ha la stessa altezza, non c'è nulla da scorrere, quindi non apparirà mai fisso.
3. Nessuna soglia impostata. Dimenticare top/bottom significa nessun punto di fissaggio.
4. Vincoli di altezza sul genitore (ad esempio un genitore flex che estende gli elementi) possono anche rimuovere lo spazio di scorrimento.
✓ Did I set top/bottom/left/right?
✓ Does ANY ancestor have overflow other than visible?
✓ Is the parent container taller than the sticky element?
position: sticky alimenta intestazioni sticky, intestazioni di tabelle, barre laterali e interfacce "scrollspy" senza JavaScript.
Ma le sue particolarità — soprattutto il fatto che un overflow su qualsiasi antenato lo rompe silenziosamente — lo rendono una fonte frequente di debug "perché non rimane fisso?".
Conoscere l'ambito del blocco contenitore e la trappola dell'overflow è ciò che ti consente di usarlo in modo affidabile.