Proprietà CSS position: Guida Completa a Static, Relative, Absolute, Fixed e Sticky
La proprietà CSS position controlla come un elemento è posizionato nel layout del documento. Esistono cinque valori—ciascuno serve esigenze di layout distinte.
Riferimento Valori
| Valore | Comportamento | Punto di Riferimento | Nel Flusso? | Usi Comuni |
|---|---|---|---|---|
static (predefinito) | Flusso normale del documento | N/A | Sì | Linea base; resetta il posizionamento ereditato |
relative | Spostamento dalla posizione normale | Se stesso | Sì (spazio riservato) | Spostamento elementi; creazione contesto di posizionamento per figli absoluti |
absolute | Rimosso dal flusso; posizionato | Più vicino antenato posizionato | No | Tooltip, menu a discesa, moduli, badge, overlay |
fixed | Rimosso dal flusso; relativo al viewport | Viewport | No | Barre di navigazione, barre laterali, widget chat, banner cookie |
sticky | Relativo fino a soglia di scorrimento, poi fisso | Viewport (quando incollato) | Sì (fino a incollato) | Intestazioni di sezione, pulsanti "torna su", filtri persistenti |
Concetti Chiave
- Contesto di posizionamento:
relative,absolute,fixed,stickysu un antenato crea un blocco contenitore per i discendentiabsolute. - Proprietà di offset:
top,right,bottom,leftfunzionano solo su elementi non statici. - Z-index: Controlla l'ordine di sovrapposizione solo per elementi posizionati (non statici).
stickyrichiede una soglia (es.top: 0) e un antenato scorrevole con altezza definita.
Pattern Pratici
/* Menu a discesa */ .dropdown { position: relative; } .dropdown-menu { position: absolute; top: 100%; left: 0; } /* Intestazione sezione sticky */ .section-header { position: sticky; top: 0; background: white; z-index: 10; } /* Nav fissa */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; } Scegli il valore meno dirompente che raggiunge il tuo obiettivo di layout—default a static/relative; ricorri a absolute/fixed/sticky solo quando necessario.