Impostare la posizione degli elementi

Passiamo ora all’analisi delle proprietà CSS che concretamente definiscono dove un elemento posizionato va a collocarsi, dal momento che con position stabiliamo solo il come.

top

Come si accennava nella lezione precedente, il significato di top cambia secondo la modalità di posizionamento.

Per gli elementi posizionati con absolute o fixed definisce la distanza verticale rispetto al bordo superiore dell’elemento contenitore. Per gli elementi posizionati con relative stabilisce invece l’ammontare dello spostamento rispetto al lato superiore della posizione originaria. In questo caso, usando valori positivi il box viene spostato sotto, mentre con valori negativi lo spostamento avviene verso l’alto.

Sintassi ed esempi

selettore {top: valore;}

I valori possono essere:

• un valore numerico con unità di misura;
• un valore in percentuale: la percentuale è relativa all’altezza dell’elemento contenitore;
• auto.

div {top: 10px;}
p {top: 10%;}

left

Per gli elementi con posizione assoluta o fissa definisce la distanza dal bordo sinistro del box contenitore. Per quelli con posizione relativa stabilisce lo spostamento rispetto al lato sinistro della posizione originaria. Valori positivi spostano l’elemento verso destra, valori negativi verso sinistra.

Sintassi ed esempi

selettore {left: valore;}

I valori possono essere:

• un valore numerico con unità di misura;
• un valore in percentuale: la percentuale è relativa alla larghezza dell’elemento contenitore;
• auto.

div {left: 10px;}
p {left: 10%;}

bottom

Per i box con posizione assoluta o fissa definisce la distanza dal bordo inferiore dell’elemento contenitore. Per quelli posizionati relativamente lo spostamento rispetto al lato inferiore della posizione originaria.

Sintassi ed esempi

selettore {bottom: valore;}

I valori possono essere:

• un valore numerico con unità di misura;
• un valore in percentuale: la percentuale è relativa all’altezza dell’elemento contenitore;
• auto.

div {bottom: 10px;}
p {bottom: 10%;}

right

Per i box con posizione assoluta o fissa definisce la distanza dal bordo destro dell’elemento contenitore. Per quelli posizionati relativamente lo spostamento rispetto al lato destro della posizione originaria.

Sintassi ed esempi

selettore {right: valore;}

I valori possono essere:

• un valore numerico con unità di misura;
• un valore in percentuale: la percentuale è relativa alla larghezza dell’elemento contenitore;
• auto.

div {right: 10px;}
p {right: 10%;}

In tutti i casi visti, per il posizionamento assoluto, è anche possibile specificare valori negativi per queste proprietà. In tal caso si avrà che il lato concorde dell’elemento posizionato assolutamente viene a trovarsi all’esterno del suo contenitore.