- Learn
- Guida CSS di base
- Impostare la posizione degli elementi
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.
Se vuoi aggiornamenti su Impostare la posizione degli elementi inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
JavaScript Power Tools
Come affrontare lo sviluppo front-end di applicazioni single page o comunque di app moderne adottando un approccio “enterprise”. Grazie all’esperienza dell’autore […]