Esempio pratico di utilizzo della proprietà position:absolute.
Di seguito viene mostrato anche il CSS completo.
Esempio:
Codice CSS:
#contenitore-box{
position:relative;
}
#box-1{
position:absolute;
left:212px;
top:27px;
border:2px solid #900;
padding:0.4em;
width:147px;
background-color:#fafafa;
color: #900;
}
#box-2{
position:absolute;
left:405px;
top:27px;
border:2px solid #900;
padding:0.4em;
width:170px;
background-color:#fafafa;
color: #900;
}
#box-3{
position:absolute;
left:50px;
top:27px;
border:2px solid #900;
padding:0.4em;
width:116px;
background-color:#fafafa;
color: #900;
}
In questo esempio abbiamo utilizzato tre div con position:absolute contenuti in un div contenitore.
L'effetto dei tre div affiancati l'uno accanto all'altro è realizzato grazie ai valori assegnati a top e left. Infatti, avendo assegnato a tutti e tre i box la stessa altezza per fare affiancare i box l'uno accanto all'altro è stato sufficiente regolare lo spazio laterale che li separa.
Bisogna comunque considerare che nel nostro caso il riferimento per i tre box è il blocco contenitore-box posizionato in modo relativo, poichè, se i tre box fossero stati racchiusi all'interno di un altro div contenitore con altre caratteristiche, essi si sarebbero posizionati in relazione a quel blocco. Vedi esempio position:relative + position:absolute.
Nel nostro esempio, invece, se consideriamo la proprietà left:212px assegnata al box-1 significa che il box-1 si scosta di 212 pixel dalla parte sinistra del box contenitore-box mentre la proprietà top:27px specifica che il box si scosta di 27 pixel dalla parte superiore del div contenitore-box.
Il posizionamento dei blocchi uno affiancato all'altro è comunque realizzabile anche con altre tecniche più raffinate, con la proprietà float:left ad esempio, che vedremo più avanti.