Esempio pratico di utilizzo della proprietà position:absolute utilizzata con position:relative
Di seguito viene mostrato anche il CSS completo.
Esempio:
Codice CSS:
div#contenitore{
position:relative;
left:180px;
top:-77px;
background-color:#fafafa;
border:2px solid #900;
padding:0.4em;
width:500px;
height:100px;
color: #900;
}
#box-1{
position:static;
margin-left:10px;
margin-top:10px;
border:2px solid #900;
padding:0.4em;
width:147px;
background-color:#fafafa;
color: #900;
}
#box-2{
position:absolute;
right:5px;
top:5px;
border:2px solid #900;
padding:0.4em;
width:120px;
background-color:#fafafa;
color: #900;
}
In questo esempio abbiamo utilizzato tre div: il box-1 con position:static, il box-2 con position:absolute e il box contenitore con position:relative.
Quello che qui ci preme sottolineare è il fatto che Il box-2 è collocato all'interno del div contenitore e pertanto la sua posizione (right:5px e top:5px) è relativa al blocco che lo contiene, ovvero div="contenitore".