position
position: indica il tipo di posizionamento, a cosa fa riferimento la posizione dell'oggetto
- static (default) può essere omesso e posiziona l'elemento nell'angolo superiore sinistro del contenitore o della pagina
se tutti i div sono static allora vengono inseriti nella pagina uno alla volta uno sotto l'altro
- absolute permette di posizionare l'elemento usando top, bottom, left e right
attenzione: se il contenitore ha specificato un posizionamento non static (quindi absolute, relative o fixed) l'elemento si posizionerà in base al contenitore non in base all'intera pagina, quindi se il contenitore é static si posizionerà in base all'intera pagina
- relative permette di posizionare l'elemento in base al suo contenitore, qualunque posizione esso abbia
- fixed permette di posizionare l'elemento sempre in base alla pagina intera, mai del contenitore, e resta sempre visibile anche quando si scorre la pagina
dopo aver indicato il tipo si può indicare la distanza al punto alto/sinistra del riferimento
- top: distanza dall'alto
- left: distanza da sinistra
- bottom: distanza dal bordo inferiore
- right: distanza da destra
valori in:
- in unità di misure
- percentuale
- auto
esempio:
#DIV {position:absolute;
top:20px;
left:50%;
...
z-index
si imposta l'ordine di posizionamento dei vari elementi sulla base di una scala di livelli, secondo l'asse z
In seguito ad un posizionamento, infatti, é possibile che un elemento si sovrapponga ad un altro rendendolo illeggibile
Impostando lo z-index é possibile modificare l'ordine di tutti gli elementi.
valori
auto: l'ordine dei livelli é uguale per tutti gli elementi
valore numerico: un valore superiore indica un livello superiore, cioé più visibile
esempio:
div #box1 {z-index: 10;}
float / clear
float é possibile rimuovere un elemento dal normale flusso del documento e spostarlo su uno dei lati (destro o sinistro) del suo elemento contenitore
valori
- left l'elemento viene spostato sul lato sinistro del box contenitore, il contenuto scorre a destra
- right l'elemento viene spostato sul lato destro, il contenuto scorre a sinistra
- none valore iniziale e di default in mancanza di una dichiarazione esplicita, l'elemento mantiene la sua posizione normale
importante: se usate il float con le immagini non avete problemi perché esse hanno una dimensione intrinseca che il browser riconosce, ma se lo applicate ad altri elementi dovete esplicitamente impostare una dimensione orizzontale con la proprietà width
esempio: le immagini saranno a sinistra con il resto a destra (circondata)
img {
float: left;
}
clear si evita che gli elementi spostati da float vadano a fianco di alcuni specifici elementi
valori
- none gli elementi float possono stare a destra e sinistra
- left si impedisce il posizionamento a sinistra
- right si impedisce il posizionamento a destra
- both si impedisce il posizionamento su entrambi i lati
esempio: le immagini stanno a sinistra, ma se a destra c'é un h1 questo starà sotto
img.imag1 {
float : left;
}
h1 {
clear : left;
}