Posizionamenti in 10 passi

1. position:static

La posizione di default di tutti gli elementi è position:static, che significa che l'elemento non è posizionato e segue il normale flusso della pagina

Normalmente non si specifica se non per sovrascrivere una regola precedentemente applicata

#div-1 {
 position:static;
}

2. position:relative

Se si specifica position:relative, allora si possono usare top o bottom, e left o rightper muovere l'elemento relativamente alla posizione in cui si dovrebbe trovare

Muoviamo div-1 giù di 20 pixels, e a sinistra di 40 pixels:

#div-1 {
 position:relative;
 top:20px;
 left:-40px;
}

Da notare lo spazio dove div-1 sarebbe stato normalmente: adesso è uno spazio vuoto. L'elemento successivo (div-after) invece non si è mosso. That's because div-1 ancora occupa il suo spazio anche se noi lo abbiamo spostato.

Sembra che position:relative non sia molto utile, ma lo sarà in combinazione con altre regole.

3. position:absolute

Quando si specifica position:absolute, l'elemento viene rimosso dal flusso normale della pagina.

Muoviamo div-1a nella posizione top right della pagina:

#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

Da notare che questa volta, poiché div-1a wè stato rimosso dal documento, gli altri elementi della pagina si sono spostati di conseguenza: div-1b, div-1c, e div-after sono saliti poiché div-1a non era più là.

Inoltre div-1a è stato posizionato nell'angolo top right della pagina: cosa utile ma non sempre desiderata.

Ciò che voglio veramente è posizionare div-1a relativamente a div-1. E qui è dove rientra in gioco il posizionamento relative.

Note

• C'è un bug in Windows IE browser: se specifichi una larghezza relativa (like "width:50%") allora la larghezza sarà basata sull'elemento padre invece che sull'elemento posizionato.

4. position:relative + position:absolute

Se settiamo relative positioning sul div-1, ogni elemento dentro div-1 sarà posizionato relativamente a div-1. Poi se settiamo absolute positioning su div-1a, lo possiamo muovere nell'angolo top right del div-1:

#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

5. due colonne absolute

Adesso possiamo fare un layout a due colonne usando relative e absolute positioning!

#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

Un vantaggio di usare absolute positioning è che possiamo posizionare gli elementi in qualsiasi ordine nella pagina, indipendentemente dall'ordine in cui compaiono nella pagina HTML. Posso mettere div-1b prima di div-1a.

Ma aspetta - che cosa è accaduto agli altri elementi? Sono stati coperti dagli absolute. Che cosa possiamo fare??

6. due colonne absolute height

Una soluzione è assegnare una height fissa agli elementi absolute.

Non è una buona soluzione per ogni design però,perché di solito non si è a conoscenza di quanto testo ndrà nei contenitori, o il font-size che verrà usato

#div-1 {
 position:relative;
 height:250px;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

7. float

Per colonne dall'altezza variabile, absolute positioning non funziona, quindi vediamo un'altra soluzione.

Possiamo usare "float" su un elemento per farlo spostare a destra a sinistra,e consentire al testo di andargli intorno. Di solito si usa per le immagini, ma si usa anche per i layout.

#div-1a {
 float:left;
 width:200px;
}

8. colonne float

Se floatiamo una colonna alla sinistra, poi anche la seconda, si affiancheranno.

#div-1a {
 float:left;
 width:150px;
}
#div-1b {
 float:left;
 width:150px;
}

9. colonne float con clear clear

Dopo gli elementi floating possiamo usare la proprietà "clear" per spingere sotto i float gli altri elementi.

#div-1a {
 float:left;
 width:190px;
}
#div-1b {
 float:left;
 width:190px;
}
#div-1c {
 clear:both;
}