Posizionamento statico e relativo

La proprietà position controlla come viene posizionato un elemento nel flusso del documento. I cinque valori sono: static, relative, absolute, fixed e sticky.

Per impostazione predefinita, ogni elemento ha position: static. Gli elementi static seguono il flusso normale del documento: gli elementi block si dispongono verticalmente, mentre gli elementi inline fluiscono da sinistra a destra. Le proprietà di offset (top, right, bottom, left) non hanno effetto.

position: relative mantiene l'elemento nel flusso normale, ma consente di spostarlo rispetto alla sua posizione normale utilizzando top, right, bottom e left.

Quando utilizza position: relative con gli offset, l'elemento si sposta visivamente, ma il suo spazio di layout originale rimane riservato. Gli altri elementi non riempiono lo spazio vuoto.

Le proprietà di offset spostano l'elemento dal relativo punto di riferimento:

• top: sposta l'elemento verso il basso dal bordo superiore
• left: sposta l'elemento verso destra dal bordo sinistro
• I valori negativi invertono la direzione

z-index funziona solo sugli elementi posizionati, non su quelli static. Se deve controllare l'ordine dei livelli, imposti almeno position: relative.

L'uso più importante di position: relative consiste nel rendere un elemento il blocco contenitore per i figli con posizionamento absolute, anche senza alcun valore di offset.

La combinazione di position: relative e transform crea un nuovo contesto di impilamento. L'elemento resta nel flusso, ma può essere trasformato visivamente.

Eviti di impostare position: relative su ogni elemento. Questa impostazione crea contesti di impilamento che possono complicare la gestione di z-index. La utilizzi solo quando servono offset o quando deve ancorare figli con posizionamento absolute.

Poiché il posizionamento relative non influisce sul flusso del layout, può animare in sicurezza top/left per ottenere effetti visivi, anche se animare transform: translate() offre prestazioni migliori.

In DevTools, osservi il pannello Computed per vedere il valore effettivo di position. Il diagramma del box model mostra le coordinate di offset esatte applicate.

Che cosa accade allo spazio di layout di un elemento quando si applica position: relative; top: 20px?

position: static è il valore predefinito: nessun offset e nessun impilamento. position: relative consente di applicare offset rispetto alla posizione dell'elemento e ne preserva lo spazio di layout. Il suo ruolo più importante consiste nel fungere da blocco contenitore per i figli con posizionamento absolute.