# Posizionamenti in 10 passi Proprietà CSS per i posizionamenti: position:static, position:relative, position:absolute, float. ## 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;
    }
id = div-before id = div-1 id = div-1a Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. id = div-1b Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem. id = div-1c id = div-after