Posizionamento relativo di un box
- devia visivamente il box dal flusso normale di una misura pari a quella dichiarata;
- preserva lo spazio lasciato;
Per "preservare" lo spazio lasciato, si intende che gli altri elementi inseriti nel flusso reagiscono come se il box si trovasse ancora nella posizione da cui è stato spostato.
Si veda il seguente codice:
position: relative;
top: 20px;
right: 20px;
padding: 10px;
margin: 5px;
background-color: #f60;
border: 1px solid #000;
width: 30%;
color:#033;
font-weight:bold;
}
Il valore di spostamento viene inserito dove è stato dichiarato dalla proprietà. Quindi top: 20px; significa 20 pixel che vengono "inseriti" sopra il box per spingerlo verso il basso;
right: 20px significa che il box viene spinto 20 pixel verso sinistra. Di conseguenza bottom lo spinge verso l'alto e left lo spinge verso destra. Apparentemente sembra una inversione, ma la proprietà descrive il punto in cui il valore viene inserito e non la direzione dello spostamento. Ecco il file di esempio per quanto riguarda quanto descritto fin' ora. Si osservi il codice seguente:
position: relative;
bottom: 20px;
left: 20px;
padding: 10px;
margin: 5px;
background-color: #f60;
border: 1px solid #000;
width: 30%;
color:#033;
font-weight:bold;
}
Questo esempio mostra quanto scritto nel codice sopra riportato.
Alla prossima con il prosieguo delle altre proprietà. Ciao!!
| < Prec. | Succ. > |
|---|
