Questo primo esempio mostra la differenza tra il posizionamento normale di un elemento e quello assoluto. Il primo box (div1) non presenta nessuna dichiarazione relativa alla posizione. Non indicare alcun valore per la proprietà position equiavale a impostare il valore static.
Codice:
#div1 {
background: Silver;
width: 300px;
}
Codice:
#div2 {
background: Silver;
width: 300px;
position: absolute;
top: 400px;
left: 400px;
}
Ora osservate il prossimo box (div2). Il valore di position è settato su absolute. Il box viene rimosso dal normale flusso del documento e posizionato in base alle coordinate stabilite dalle proprietà top e left. Le coordinate sono relative all'angolo superiore sinistro del box. Il posizionamento assoluto avviene sempre rispetto al blocco contenitore dell'elemento purchè esso abbia un valore per positin diverso da static. Altrimenti il box contenitore è l'elemento radice HTML, come nel nostro caso.