position:relative + 2 position:absolute

Esempio pratico di utilizzo della proprietà position:absolute utilizzata con position:relative
Di seguito viene mostrato anche il CSS completo.

Esempio:

div#contenitore{ position:relative; }

div#box-1{
position:absolute;
}

div#box-2{ position:absolute;
}

Codice CSS:

div#contenitore{
position:relative;
left:10px;
top:10px;
background-color:#fafafa;
border:2px solid #900;
padding:0.4em;
width:500px;
height:100px;
color: #900;
}
#box-1{
position:absolute;
right:5px;
top:5px;
border:2px solid #900;
padding:0.4em;
width:120px;
background-color:#fafafa;
color: #900;
}
#box-2{
position:absolute;
left:5px;
bottom:5px;
border:2px solid #900;
padding:0.4em;
width:120px;
background-color:#fafafa;
color: #900;
}

In questo esempio abbiamo racchiuso all'interno del div contenitore posizionato in modo relativo due div (box-1 e box-2) posizionati in modo assoluto.
I due div assoluti si posizionano all'interno del div relativo in base alle coordinate definite dai valori right:5px e top:5px per il box-1 e left:5px e bottom:5px per il box-2.

torna alla pagina precedente