3.52
Facciamo ora un’esplorazione delle caratteristiche CSS che determinano concretamente la posizione di un elemento, poiché con la proprietà “position” stabiliamo solo il modo in cui avviene tale posizionamento.
Top Come accennato nella lezione precedente, il concetto di “top” varia a seconda della modalità di posizionamento.
Per gli elementi posizionati con “absolute” o “fixed”, indica la distanza verticale dal bordo superiore dell’elemento contenitore. Nel caso degli elementi posizionati con “relative”, determina lo spostamento rispetto al lato superiore della posizione originale. Utilizzando valori positivi, il box viene spostato verso il basso, 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, relativo all’altezza dell’elemento contenitore.
- “auto”.
div {top: 10px;}
p {top: 10%;} Left Per gli elementi con posizione assoluta o fissa, stabilisce la distanza dal bordo sinistro del contenitore. Per quelli con posizione relativa, determina lo spostamento rispetto al lato sinistro della posizione originale. Valori positivi spostano l’elemento verso destra, mentre valori negativi lo spostano verso sinistra.
Sintassi ed esempi:
selettore {left: valore;} I valori possono essere:
- Un valore numerico con unità di misura.
- Un valore in percentuale, relativo alla larghezza dell’elemento contenitore.
- “auto”.
div {left: 10px;}
p {left: 10%;} Bottom Per i box con posizione assoluta o fissa, specifica la distanza dal bordo inferiore dell’elemento contenitore. Per quelli posizionati relativamente, indica lo spostamento rispetto al lato inferiore della posizione originale.
Sintassi ed esempi:
selettore {bottom: valore;} I valori possono essere:
- Un valore numerico con unità di misura.
- Un valore in percentuale, relativo all’altezza dell’elemento contenitore.
- “auto”.
div {bottom: 10px;}
p {bottom: 10%;} Right Per i box con posizione assoluta o fissa, determina la distanza dal bordo destro dell’elemento contenitore. Per quelli posizionati relativamente, indica lo spostamento rispetto al lato destro della posizione originale.
Sintassi ed esempi:
selettore {right: valore;} I valori possono essere:
- Un valore numerico con unità di misura.
- Un valore in percentuale, relativo alla larghezza dell’elemento contenitore.
- “auto”.
div {right: 10px;}
p {right: 10%;} In tutti i casi esaminati, nel posizionamento assoluto, è possibile specificare valori negativi per queste proprietà. In tal caso, il lato concorde dell’elemento posizionato assolutamente si trova all’esterno del suo contenitore.