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.

Consigli per l'uso

  • 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 fra elementi, ma non ha alcun effetto su un elemento con position: static. Prima di provare «Specifica z-index», cambiate quindi il valore di position.
  • 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.

Domande frequenti

absolute si posiziona rispetto all'antenato posizionato più vicino, cioè il primo elemento genitore con position diverso da static; se non ne esiste alcuno, il riferimento finale è l'intera pagina (il blocco contenitore iniziale). fixed prende invece sempre come riferimento la finestra del browser, quindi resta nello stesso punto dello schermo anche scorrendo la pagina.

Le cause più frequenti sono: un elemento genitore con overflow: hidden o overflow: auto, un genitore di altezza quasi identica all'elemento adesivo — che non lascia margine per fissarsi — oppure la mancanza di qualsiasi offset come top o bottom. Inoltre l'effetto si esaurisce entro i limiti del contenitore genitore, che va quindi progettato come area di scorrimento.

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 ha effetto solo sugli elementi con position diverso da static, cioè relative, absolute, fixed e sticky. Inoltre, se a un elemento genitore sono applicate proprietà come transform o opacity, si crea un contesto di impilamento proprio e lo z-index dei figli può non comportarsi come ci si aspetta.

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.
Tool-kun

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 compare nelle specifiche (CSS Positioned Layout Module Level 3) già intorno al 2012, ma l'implementazione era complessa: Safari fu il primo, verso il 2013, con il prefisso di WebKit (-webkit-sticky). Chrome adottò la parola chiave standard nel 2017 e solo qualche anno dopo, verso il 2020, il valore divenne utilizzabile con tranquillità su tutti i browser principali, Firefox compreso.

Il comportamento «si fissa a un certo punto» si spiega, sul piano implementativo, come un ibrido fra relative e fixed: normalmente l'elemento segue il flusso come relative e, quando lo scorrimento raggiunge l'offset indicato, si comporta come se fosse passato a fixed. Il fatto che questo scambio avvenga solo entro l'area di scorrimento del genitore è all'origine della maggior parte dei casi in cui sticky «non funziona».

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.

Leggi le curiosità collegate

Vedi tutte le curiosità

Chi consulta questo strumento guarda anche

Generatore di gradienti CSS

Strumento gratuito che, indicando due o più punti di colore, genera il codice CSS di linear-gradient e radial-gradient con anteprima in tempo reale. Angolo e posizioni sono liberamente regolabili e il codice si copia con...

Generatore CSS box-shadow (ombre dei riquadri)

Strumento gratuito che genera il box-shadow dei CSS con anteprima, regolando con i cursori scostamento, sfocatura, diffusione, colore e opacità. Il codice prodotto si copia con un clic.

Generatore CSS Flexbox

Strumento gratuito per provare i layout Flexbox regolando dall'interfaccia flex-direction, justify-content, align-items, flex-wrap e gap, con anteprima in tempo reale. Il codice CSS generato si copia con un clic.

Generatore CSS Grid

Strumento gratuito per provare i layout CSS Grid regolando dall'interfaccia grid-template-columns e rows, justify-items, align-items e gap, con anteprima in tempo reale. Il codice CSS generato si copia con un clic.