Oltre al posizionamento statico, ossia quello utilizzato di default nell’HTML, tramite i CSS si possono definire altri tipi di posizionamento:

• Relativo
• Assoluto
• Fixed

Il posizionamento relativo non estrae l’oggetto dal flusso di formattazione ma consenti di assegnargli un offset, cioè una spazitura dai bordi.
Tale offset si può assegnare tramite le proprietà: left,right,top e bottom.

Un esempio di regola css per il posizionamento relativo è:

#relativo{
position: relative;
top:5px;
left:12px;
}

Il posizionamento assoluto estrae l’oggetto dal normale flusso e ne consente il posizionamento in un punto specifico della pagina.
Tale posizione si può assegnare tramite le proprietà: left,right,top e bottom.

Il rifermento da cui si inizia a calcolare lo spazio per il posizionamento è il primo parente con posizionamento relativo o assoluto che contiene il blocco in questione.
Se non sono esplicitamente definiti si prenderà come riferimento l’elemento HMTL.
Il posizionamento assoluto può essere applicato solo ad elementi con display:block.

Ecco un esempio:

#assoluto{
position: absolute;
top:55px;
right:21px;
}

Il posizionamento fisso è molto simile all posizionamento assoluto, la differenza è che viene presa sempre la pagina come riferimento, da questo derive che se scrolliamo i box fissi restano comunque nella loro posizione.

Per completezza forniamo un esempio:

#fisso{
position: fixed;
bottom:0;
right:0;
}