Generatore della proprietà CSS position

Strumento gratuito per passare dall'interfaccia fra i cinque valori static, relative, absolute, fixed e sticky, osservare in anteprima l'effetto di top/right/bottom/left e z-index e generare il codice CSS corrispondente.

Ultimo aggiornamento: 2026-10-17

Confrontare i cinque valori di position

position è la proprietà che decide dove un elemento si collochi, e assume cinque valori: static, relative, absolute, fixed e sticky. Questo strumento vi lascia passare dall'uno all'altro accertando sul momento come si comportino top, right, bottom, left e z-index, e poi generare il CSS.

Quando un elemento posizionato con absolute finisce in un punto inatteso, la causa è quasi sempre la stessa: si posiziona rispetto all'antenato più vicino la cui position non è static. Se un antenato del genere manca, l'elemento prende come riferimento il blocco contenitore iniziale, un rettangolo grande quanto il viewport. Un position: relative dimenticato sul genitore spiega quasi tutti i casi. Anche sticky ha una trappola nota: si aggancia all'antenato più vicino dotato di un meccanismo di scorrimento (overflow impostato su hidden, auto o scroll), quindi se quell'antenato non scorre davvero, sembra che l'elemento non si agganci affatto. E poiché z-index resta chiuso in un'unità annidata chiamata contesto di sovrapposizione, un elemento che si trova in un contesto posto sotto un altro non può superarlo, per quanto alto sia il valore.

Come si usa

Commutate il valore di position Provarli tutti e cinque a turno mostra rispetto a che cosa ciascuno si collochi.
Muovete gli scostamenti Accertate che top e i suoi simili non abbiano effetto alcuno finché il valore è static.
Mutate z-index Potete vedere come l'ordine di impilamento si sposti.
Copiate il CSS generato Non appena la collocazione è quella cercata, si incolla tale e quale nel vostro codice.

Consigli per sfruttarlo al meglio

Impostando position: relative e indicando top e left, il riquadro B si sposta soltanto visivamente rispetto alla sua posizione originaria. Notate che la posizione del riquadro C, l'elemento successivo, non cambia.
Passando ad absolute o a fixed, il riquadro B esce completamente dal flusso normale e potete osservare come il riquadro C risalga a occuparne lo spazio.
z-index stabilisce l'ordine di sovrapposizione quando gli elementi si accavallano, ma non ha effetto sugli elementi con position: static, tranne che sugli elementi flex e grid, dove funziona anche senza posizionamento. Provate a cambiare position prima di usare «Specifica z-index».
position: sticky produce effetto solo all'interno di un contenitore scorrevole. Fate scorrere davvero il riquadro di anteprima per vedere il momento in cui l'elemento si fissa.
Il codice CSS generato si copia e si incolla direttamente nel vostro foglio di stile: provate a verificare che la resa sulla pagina reale sia la stessa.

Quando torna utile

Nel fissare un'intestazione in cima alla vista

Con sticky l'intestazione resta al suo posto mentre la pagina scorre.

Nel sovrapporre un distintivo o un'icona a un angolo

relative sul genitore e absolute sul figlio è lo schema di base.

Nel porre un pulsante fisso

fixed si posiziona di norma rispetto al viewport, quindi non si sposta durante lo scorrimento, a meno che un antenato abbia un transform, che cambia il riferimento.

Nell'esaminare un problema di impilamento

Quando un elemento si nasconde sotto un altro, un contesto di impilamento è la prima cosa da sospettare.

Termini di position

Static: Il valore iniziale. Finché resta attivo, gli scostamenti come top non hanno effetto, e nemmeno z-index, a meno che l'elemento sia un elemento flex o grid.
Relative: Sposta l'elemento dal punto in cui altrimenti si sarebbe trovato. Si muove, eppure lo spazio da cui viene resta riservato.
Absolute: Si posiziona rispetto all'antenato più vicino la cui position non è static. In mancanza, il riferimento è il blocco contenitore iniziale, un rettangolo grande quanto il viewport.
Fixed: Si posiziona di norma rispetto al viewport, così l'elemento resta fermo per quanto si scorra la pagina. Un antenato con transform, perspective, filter, contain o will-change diventa invece il riferimento.
Sticky: Resta al suo posto normale finché non si raggiunge lo scostamento indicato, poi si aggancia. Si aggancia all'interno dell'antenato più vicino con un meccanismo di scorrimento; se quell'antenato non scorre, sembra non funzionare.
Contesto di impilamento: L'unità annidata entro la quale l'ordine di impilamento si decide. Uno z-index al suo interno non si può confrontare direttamente con gli elementi esterni.

Domande frequenti

absolute si posiziona rispetto all'antenato posizionato più vicino (il genitore più prossimo che non sia position: static); se non ce n'è nessuno, prende come riferimento il blocco contenitore iniziale, un rettangolo grande quanto il viewport. fixed, invece, si posiziona di norma rispetto al viewport del browser, per cui resta nello stesso punto dello schermo anche mentre la pagina scorre. Se però un antenato ha transform, perspective, filter o una proprietà simile, il riferimento diventa quell'antenato.

Le cause più comuni sono un antenato con overflow: hidden, auto o scroll che in realtà non scorre mai, un genitore la cui altezza supera appena quella dell'elemento sticky (senza margine per agganciarsi) oppure, semplicemente, uno scostamento come top mai impostato. sticky si aggancia all'antenato più vicino con un meccanismo di scorrimento e non può restare agganciato oltre i limiti del genitore, quindi verificate anche che il genitore sia abbastanza alto.

relative sposta l'elemento, dei valori indicati in top/right/bottom/left, rispetto alla posizione che avrebbe occupato con position: static. La grande differenza rispetto ad absolute è che lo spazio occupato dall'elemento — e quindi l'effetto sugli altri — resta quello originario.

z-index agisce solo sugli elementi che non sono position: static (cioè relative, absolute, fixed o sticky) e sugli elementi flex e grid. Inoltre non si comporta come previsto se un elemento genitore crea un proprio contesto di sovrapposizione, per esempio con transform o opacity, perché i valori z-index dei figli restano limitati a quel contesto.

Il metodo classico è assegnare position: relative all'elemento genitore che volete usare come riferimento. Anche senza indicare alcun offset, la sola presenza di position: relative lo rende un «elemento posizionato» e i discendenti con absolute si collocheranno rispetto al suo interno.

A proposito — il lungo cammino verso la standardizzazione di position: sticky

La proprietà CSS position ha avuto per lungo tempo quattro soli valori: static, relative, absolute e fixed. Per realizzare intestazioni o barre laterali che si fissano a un certo punto dello scorrimento bisognava monitorare in JavaScript l'evento di scroll e passare manualmente a position: fixed: non esisteva alcun meccanismo interamente in CSS.

L'idea di position: sticky fu proposta intorno al 2012 per la specifica CSS Positioned Layout Module Level 3, e Safari ne rilasciò una prima versione con prefisso del produttore (-webkit-sticky) intorno al 2013. Firefox fu sorprendentemente rapido e supportò la parola chiave senza prefisso già nel 2014 con la versione 32, mentre Chrome arrivò solo nel 2017 con la versione 56. Da quando Safari ha abbandonato il prefisso con la versione 13 nel 2019, la semplice parola chiave sticky funziona in tutti i principali browser.

Dietro le quinte, il comportamento di sticky di «bloccarsi a metà dello scorrimento» si descrive meglio come un ibrido fra relative e fixed: normalmente l'elemento si comporta come relative e, quando la posizione di scorrimento raggiunge lo scostamento indicato, si comporta come fixed. Questo passaggio si misura rispetto all'antenato più vicino con un meccanismo di scorrimento e avviene solo entro i limiti dell'elemento genitore: è proprio per questo che sticky sembra così spesso «non funzionare» quando di mezzo ci sono l'overflow di un antenato o l'altezza del genitore.

Oggi sticky è una tecnica ricorrente del design web: fissare la riga di intestazione di una tabella, far seguire l'indice allo scorrimento della pagina e così via. Non dover più monitorare lo scorrimento in JavaScript è stato un progresso importante sia per le prestazioni sia per la semplicità del codice.

Vedi tutte le curiosità