Posizionamento degli elementi
Come spiegato prima, con la
proprietà display possiamo cambiare la visualizzazione degli elementi da un elemento inlinea (come un elemento span che rimane in riga e prende una larghezza minimale) ad un elemento di blocco (come un paragrafo, un blocco con un stacco superiore e inferiore e che prende tutto la larghezza disponibile se non specificamente dato una larghezza fissa) e vice versa... In sei stessa, questa
proprietà css può cambiare l'aspetto generale d'una pagina.
Per creare il layout di un pagina e posizionare gli elementi, usiamo altre proprietà css:
float e position.
Proprietà css float
Il
float toglie l'elemento del flusso normale della pagina e lo posiziona a destra (
float:right;) o a sinistra (
float:left;) dentro il suo elemento contenitore (può essere il corpo stesso della pagina come può essere un div per esempio). Il resto del contenuto seguirà il movimento, spostandosi nel lato opposto dell'elemento floatato per riempire eventuale spazio disponibile.
NB: altro che per gli immagini (img), una larghezza (width) deve sempre essere specificata per usare la proprietà float.
Esempio della proprietà float con un immagine e un blocco di testo...
Insieme alla
proprietà float viene spesso usato la proprietà
css clear. Il clear, valido solo per elementi di blocco, permette che i lati d'un elemento floatato rimangono vuoti usando
clear: right; , clear: left; , clear:both.
Il
clear:both; è usato come hack per evitare il collasso del sfondo dell'elemento contenitore.
Per esempio, se un div contenitore con uno sfondo nero contiene elementi floatato, la sua altezza si azzera automaticamente visto che il suo contenuto è stato rimosso del flusso normale e perde il suo 'spessore'. Con l'uso d'un clear:both; dopo gli elementi floatato, il contenitore recupera la sua altezza reale. Questo metodo è comunemente conosciuto come il
clearfix.
Proprietà css position
Questa proprietà ci permette di posizionare precisamente gli elementi del nostro layout in modo relativo o assoluto in rapporto al suo contenitore o in modo fisso in rapporto alla finestra del browser.
position: relative;
Con il valore
relative, l'elemento è posizionato in relazione al suo contenitore. Possiamo posizionare questo elemento più precisamente usando le proprietà
top(superiore),
right(destra),
bottom (inferiore) e
left(sinistra) con valore d'unita di misura o percentuale.
Il valore di queste proprietà indica l'allontanamento verticale e/o orizzontale tra i bordi del elemento contenitore e dell'elemento a quale è applicato il position: relative; (un po come delle margine).
position: absolute;
L'elemento in questo caso è tolto del tutto del flusso normale della pagina. Questo elemento è posizionato in
modo assoluto in relazione al suo contenitore solo se lui stesso ha la proprietà position applicata (che non sia
static, il valore di default). Se no, la sua posizione sarà basata sul l'elemento HTML stesso della pagina (la parte visiva della finestra del browser).
Con le
proprietà top, right, bottom, left, possiamo dare coordinate precise in unita di misura o percentuale.
Per esempio con la proprietà bottom e il valore 10px, il bordo inferiore dell'elemento si troverà precisamente a 10px del bordo inferiore del suo contenitore.
position: fixed;
La posizione fissa ha le stesse proprietà che per il modo assoluto. I punti importanti è che la sua posizione è sempre relativa alla parte visiva della finestra del browser e che l'elemento rimane sempre fisso al suo posto anche se il resto della pagina è scorrevole.
Per appronfondire questa proprietà:
CSS position 
22-04-08, 10:24
Linear Mode
