CSS  »  Articoli  »  CSS Template e layout 

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:

Figura 1 - Schena del funzionamento dei posizionamenti relativi

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.

Altri articoli

Altre guide

Altre newsletter