Posizionamento fixed e sticky
Ancorate gli elementi alla viewport o create intestazioni e barre laterali sticky durante lo scorrimento.
Posizionamento fixed e sticky è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
position: fixed
Un elemento fixed viene posizionato rispetto al viewport del browser e resta fermo anche quando la pagina scorre. Viene inoltre rimosso dal flusso del documento.
<div class="sticky-nav">Fixed navigation bar</div>
<p>Scroll content below the fixed nav...</p>
Casi d'uso del posizionamento fixed
Usi comuni di position: fixed:
- Barre di navigazione che restano in alto
- Pulsanti di azione fluttuanti (FAB)
- Widget di chat in basso a destra
- Banner per il consenso ai cookie
- Overlay modali
Compensare le intestazioni fixed
Le intestazioni con posizionamento fixed si sovrappongono al contenuto sottostante. Aggiunga un padding o un margine superiore uguale all'altezza dell'intestazione per spostare il contenuto verso il basso:
<div class="nav">Fixed Header (64px)</div>
<p>Page content starts safely below the header thanks to padding-top.</p>
Genitori con transform e fixed
Una particolarità importante: se a un elemento genitore viene applicato un CSS transform, perspective o filter, il posizionamento fixed diventa relativo a quel genitore, non al viewport. Si tratta di un bug comune.
position: sticky
position: sticky è un ibrido: l'elemento scorre normalmente finché non raggiunge una soglia definita, ad esempio top: 0, poi rimane fisso all'interno del contenitore genitore.
<div class="table-header"><table><thead><tr><th>Name</th><th>Score</th></tr></thead><tbody><tr><td>Row 1</td><td>10</td></tr><tr><td>Row 2</td><td>20</td></tr><tr><td>Row 3</td><td>30</td></tr><tr><td>Row 4</td><td>40</td></tr><tr><td>Row 5</td><td>50</td></tr></tbody></table></div>
sticky richiede un genitore scorrevole
L'elemento sticky rimane fisso all'interno del suo blocco contenitore. Se il genitore non è abbastanza alto da consentire lo scorrimento, sticky non ha effetto. Il genitore deve avere overflow non impostato su hidden.
Top, right, bottom, left per sticky
Per attivare sticky, deve definire almeno un offset. Schemi comuni:
<div class="header">Sticky Header</div>
<div class="sidebar">Sticky Sidebar</div>
<div class="footer">Sticky Footer</div>
Intestazioni sticky delle tabelle
Sticky è perfetto per le intestazioni delle tabelle all'interno di contenitori di tabelle scorrevoli: l'intestazione resta visibile mentre si scorre tra le righe.
<div class="table-wrapper"><table><thead><tr><th>Product</th><th>Price</th></tr></thead><tbody><tr><td>Apple</td><td>$1</td></tr><tr><td>Bread</td><td>$3</td></tr><tr><td>Milk</td><td>$2</td></tr><tr><td>Eggs</td><td>$4</td></tr><tr><td>Cheese</td><td>$5</td></tr></tbody></table></div>
Schema per una sidebar sticky
Una sidebar sticky classica che resta visibile mentre scorre il contenuto principale:
<div class="layout"><div class="sidebar">Sticky sidebar content</div><div class="main">Main scrolling content area with lots of text to scroll through.</div></div>
Riepilogo di fixed e sticky
Differenze fondamentali:
- Fixed: sempre relativo al viewport, sempre fuori dal flusso
- Sticky: scorre con il contenuto fino alla soglia, resta nel flusso e si arresta al limite del genitore
Prestazioni: fixed e livelli
Gli elementi fixed creano un nuovo contesto di impilamento e possono causare un ricalcolo del layout durante lo scorrimento se si sovrappongono alle aree da ridisegnare. Mantenga semplici gli elementi fixed ed eviti proprietà costose come box-shadow.
Verifica rapida
Quale vincolo ha position: sticky che position: fixed non ha?
Riepilogo
position: fixed ancora gli elementi al viewport per creare navigazione sticky e overlay. position: sticky scorre normalmente fino a una soglia e poi rimane fisso: è perfetto per le intestazioni delle tabelle e le sidebar. Entrambi richiedono almeno una proprietà di offset per attivare il comportamento sticky.
Domande Frequenti
La lezione «Posizionamento fixed e sticky» è gratuita?
Sì — il testo completo di «Posizionamento fixed e sticky» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Posizionamento fixed e sticky»?
Ancorate gli elementi alla viewport o create intestazioni e barre laterali sticky durante lo scorrimento. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare CSS Academy?
Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Posizionamento fixed e sticky»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione CSS Academy?
Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Posizionamento statico e relativo
- Posizionamento assoluto e containing block
- Posizionamento fixed e sticky
- Z-index e contesto di sovrapposizione