Il capitolo dei CSS relativo al posizionamento degli elementi è un argomento abbastanza complesso ma molto importante.
position è una proprietà fondamentale per la gestione della posizione di un elemento (sia esso di blocco o in linea). Si determina il modo di presentare un elemento in una pagina web. Si applica a tutti gli elementi e non è ereditato.
La sintassi CSS è la seguente:
selettore {position: valore}
I valori messi a disposizione dai CSS sono:
- position: static
- position: relative
- position: absolute
- position: fixed
position: static
Il posizionamento "statico" rappresenta il valore predefinito, di default, per tutti gli elementi che non hanno alcuna dichiarazione. Un elemento con la regola position: static assume la posizione normale che esso occupa nel flusso del documento web.
position: relative
Un elemento con position: relative viene posizionato relativamente al suo box contenitore. Se abbiamo un solo div che vogliamo inserire in una pagina, il suo "contenitore" sarà il body. Altro esempio: se vogliamo posizionare un paragrafo in un div, il "contenitore" del paragrafo sarà il div stesso. Tenendo ben presente questo concetto, possiamo affermare che il posizionamento relativo di un box, esegue due cose:
- 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 del documento reagiscono come se il box si trovasse ancora nella posizione da cui è stato spostato. La posizione viene impostata con le proprietà top, left, bottom o right. Si osservi il seguente codice:
.boxrel {
position:relative;
top:20px;
right:20px;
padding:10px;
margin:5px;
background-color:#f60;
border:1px solid #000;
width: 30%;
color:#033;
font-weight:bold;
}
L'elemento viene inserito dove è stato dichiarato dalla proprietà. Quindi: top: 20px significa che l'elemento viene spinto verso il basso di 20px. Immaginiamo una "forza" che viene applicata dall'alto.
right: 20px, seguendo lo stesso concetto, sta a significare che il box subisce una "spinta", da destra verso sinistra, di altrettanti 20px. Di conseguenza bottom "spinge" verso l'alto e left "spinge" verso destra. Apparentemente sembra una "forza" inversa, ma la proprietà descrive il punto in cui il valore viene inserito e non la direzione dello spostamento.
Il file di esempio di quanto descritto fino ad ora.
position: absolute
La proprietà position: absolute toglie completamente il div dal flusso del documento. Viene posizionato in relazione al suo blocco contenitore e gli altri elementi si comportano come se non ci fosse. E' posizionato in base ai valori forniti con le proprietà top, left, bottom o right. Il contenitore di un box posizionato in maniera assoluta rappresenta il suo più prossimo elemento capostipite, ancestor, con una posizione diversa rispetto a quella statica.
Dove non c'è un elemento capostipite, il blocco contenitore è l'elemento radice del nostro documento, cioè html piuttosto che l' elemento body. Di conseguenza i margini del body non hanno molta importanza. Il codice di seguito riportato dichiara un box con position: absolute in una pagina in cui ci sono altri elementi:
.boxassoluto {
position: absolute;
top: 25px;
right: 45px;
padding: 10px;
margin: 5px;
background-color: #f60;
border: 1px solid #000;
width: 40%;
}
Ecco il file di esempio in cui è possibile vedere come si comporta nella pagina. Ai box numerati (1, 2 e 3) è stata data una dimensione del 40%.
Un elemento dichiarato con position:absolute è, di default, reso block-level, (elemento di blocco), indipendentemente dalla sua natura iniziale. In maniera implicita, è come se l'elemento assumesse anche la proprietà "display:block". Da questo ne consegue che tutti gli elementi posizionati con position: absolute "diventano" elementi block-level. Questo sta ad indicare che è possibile assegnare una dimensione. E' consigliabile impostare almeno la larghezza (width).
position: fixed
La posizione fissa è simile alla posizione assoluta. Anche in questo caso, il box viene sottratto al normale flusso del documento. Il blocco contenitore, in questo caso, è il punto di partenza (o punto zero). Incrocio left-top in alto a sinistra della finestra. Ciò significa che se si scorre il documento, il div verrà visualizzato sempre nella posizione in cui è stato posizionato. Un box posizionato con position: fixed non scorre con il resto del documento. Per rendere meglio l' idea, si veda il seguente file di esempio.
Il codice CSS non è molto differente da quello di altri esempi visti, però presenta una "posizione fissa" per quanto riguarda il box. È stato aggiunto un margine ampio ai paragrafi (margin-left: 30%) così da lasciarlo libero. I paragrafi non possono "avvertire" la presenza del box in quanto il posizionamento è di tipo assoluto e di conseguenza viene rimossa dal flusso della pagina.