Utilizzando i fogli di stile si possono posizionare gli elementi in un qualsiasi punto del documento. In questo modo si puo' risparmiare tempo prezioso, altresi' sprecato nella creazione di complicate tabelle usate per perfezionare la distribuzione degli oggetti.
Ecco quindi le proprieta' da utilizzare per posizionare gli elementi:
Position
Imposta la posizione di un elemento. I valori possibili sono:
relative relativamente ad altri elementi.
static (default).
absolute la posizione dell'oggetto e' assoluta: in relazione a nessun altro elemento.
Il codice, per esempio potrebbe essere:
#nomeID { position: absolute }
Left
Attribuisce il limite sinistro all'elemento. I valori che puo' assumere sono:
unita' di misura quali pixel, punti, pollici ecc.
auto (default).
percentuale calcolata in relazione alle dimensioni dell'elemento parent. Se tali dimensioni sono impostate su auto, il valore rimane indefinito.
Per esempio:
#nomeID { left: 7em }
Top
Attribuisce il limite superiore all'elemento. I valori che puo' assumere sono:
unita' di misura quali pixel, punti, pollici ecc.
auto (default).
percentuale calcolata in relazione alle dimensioni dell'elemento parent. Se tali dimensioni sono impostate su auto, il valore rimane indefinito.
Per esempio:
#nomeID { top: 20ex }
Clip
Individua un'area appartenente a un elemento la sola che deve essere visualizzata. I valori che puo' assumere sono:
shape rect(top right bottom left)
auto (default).
Per esempio:
#nomeID { clip: rect(10pt 100pt 100pt 10pt) }
Overflow
Gestisce i casi in cui il contenuto di un elemento superi le dimensioni dell'area all'interno della quale deve essere inserito. I valori che puo' assumere sono:
visible visibile.
hidden nascosto.
auto (default).
scroll all'area viene aggiunta una barra di scorrimento.
Per esempio:
#nomeID { overflow: hidden }
Visibility
Attribuisce all'elemento la possibilita' di essere visto dall'utente. Tramite JavaScript, il suo valore iniziale puo' essere cambiato. Le possibilita' di scelta sono:
visible visibile.
hidden nascosto.
inherit inerente ad altri elementi.
auto (default).
Per esempio:
#nomeID { visibility: visible }
Z-index
Attribuisce un indice all'oggetto specificato in modo da permettere l'accavallamento tra oggetti. Gli elementi con un indice-z piu' basso appariranno davanti. Le possibilita' di scelta sono:
indice un numero da 1 in poi.
auto (default).
Per esempio:
#nomeID { z-index: 1 }
Float
Permette il posizionamento del testo intorno a un elemento. I possibili valori sono:
left sinistra.
right destra.
none (default).
Per esempio:
image { float: right }
Clear
Definisce la posizione di un oggetto rispetto a un altro. I possibili valori sono:
left sinistra.
right destra.
both
none (default).
Per esempio:
font { clear: left }
