Capire i posizionamenti relativi

Quello dei posizionamenti relativi è uno di quegli argomenti spesso trascurati e sottovalutati
nei fogli di stile, in questo appuntamento cercheremo di capirli a fondo.

Con il posizionamento relativo, ottenuto attraverso la dichiarazione
position: relative si va a modificare la posizione naturale di un elemento
traslandola attraverso l'uso delle keyword top, left,
right e bottom. Un elemento posizionato relativamente
non è rimosso dal flusso della pagina, ma solo spostato. In tal senso, è importante
evidenziare che per gli altri elementi di pagina è come se occupasse la sua posizione
naturale. In sostanza, un elemento posizionato relativamente è come se lasciasse
una sorta di segnaposto nella posizione in cui naturalmente dovrebbe essere.

Per rendere più chiare le cose, ho preparato un piccolo esempio
in cui il testo in grassetto della seconda sezione viene traslato con il posizionamento
relativo attraverso la seguente regola:

Ora è importante fissare un concetto essenziale, ovvero come il posizionamento relativo
venga effettuato tramite le keword top, left, right e
bottom. Si potrebbe pensare che si riferiscono ad un sistema di coordinate,
ma in realtà si tratta di vere e proprie traslazioni. La seguente immagine sarà utile a spiegare
le cose:

La metafora più semplice per comprendere a fondo i posizionamenti relativi è immaginare
che sui quattro lati di un elemento posizionato relativamente ci siano quattro maniglie
che si possono tirare o spingere: un valore positivo equivale a spingere,
mentre un valore negativo equivale a tirare l'elemento.

Nel caso dell'esempio, se
viene specificato left: 30px significa che l'elemento viene spinto da sinistra
di 30 pixel. Dichiarando invece top: -20px è come se tirassimo l'elemento dal suo
lato superiore, con il conseguente effetto di traslarlo verso l'alto di 20 pixel.

Rivediamo a questo punto l'esempio
e un suo screenshot leggermente ingrandito e con riportato in grigio il segnaposto,
ovvero l'elemento nella sua posizione naturale:

Riepilogando: l'elemento lascia un segnaposto nella sua posizione naturale per poi
essere spinto da sinistra di 30px e tirato dall'alto di 20px.

Se è chiaro il meccanismo, prima di guardare il secondo esempio osservate la seguente
regola:

E provate a immaginare come venga spostato l'elemento in grassetto rispetto
alla sua posizione naturale. Ricordate: positivo=spingere e negativo=tirare.
Fatto? Ora potete mettervi alla prova consultando il risultato.

In conclusione, sarà chiaro al lettore che con il posizionamento relativo andrebbero
specificati al massimo uno o due valori tra top, left, bottom e right: specificarne
tre o quattro non avrebbe senso.

È possibile specificare valori nelle tradizionali unità di misura:
px, em, pt solo per citarne alcune. Da notare che è possibile
anche specificare valori in percentuale: in questo caso l'entità della traslazione
di un elemento posizionato relativamente si riferirà a una percentuale delle dimensioni del suo contenitore;
top e bottom saranno quindi una percentuale dell'altezza del contenitore, mentre left e right saranno
una porzione della sua larghezza.

Conclusioni

Si conclude qui l'articolo dedicato ai posizionamenti relativi, in cui ho
cercato di spiegare al mio meglio come funzionano. I posizionamenti relativi
sono ben supportati dai browser, ma il loro uso è spesso trascurato o poco
compreso. Si rivelano a volte fondamentali anche per i posizionamenti assoluti,
che saranno argomento del prossimo appuntamento. Non mancate!