Esempio pratico di utilizzo delle proprietà per il posizionamento relativo.
Di seguito viene mostrato anche il CSS completo.
Esempio:
div#box-1{
position:static;
}
div#box-2{
position:relative;
}
div#box-3{
position:static;
}
Codice CSS:
div#box-1{
position:static;
margin:10px;
border:solid;
padding:0.4em;
background-color:#eee;
color: #900;
width:500px;
}
div#box-2{
position:relative;
border:solid;
padding:0.4em;
left:1.8em;
top:0.5em;
width:450px;
background-color:#fafafa;
color: #900;
}
div#box-3{
position:static;
margin:10px;
border:solid;
padding:0.4em;
background-color:#eee;
color: #900;
width:500px;
}
In questo esempio ci sono tre div, due posizionati in modo statico e uno posizionato in modo relativo.
Tramite i valori assegnati alle proprietà top e left il secondo blocco è spinto 0.5em verso il basso e 1.8em verso destra rispetto alla posizione che assumerebbe nel normale flusso.
Esempio pratico di utilizzo delle proprietà per il posizionamento relativo.
Di seguito viene mostrato anche il CSS completo.
Esempio:
div#box-1{
position:static;
}
div#box-3{
position:static;
}
Codice CSS:
div#box-1{
position:static;
margin:10px;
border:solid;
padding:0.4em;
background-color:#eee;
color: #900;
width:500px;
}
div#box-2{
position:relative;
border:solid;
padding:0.4em;
left:1.8em;
top:0.5em;
width:400px;
background-color:#fafafa;
color: #900;
margin:5px 10px 20px 20px;
}
div#box-2a{
position:relative;
border:solid;
padding:0.4em;
left:232px;
bottom:0;
width:150px;
background-color:#ffffaa;
color: #900;
}
div#box-3{
position:static;
margin:10px;
border:solid;
padding:0.4em;
background-color:#eee;
color: #900;
width:500px;
}
In questo esempio ci sono 4 div, due posizionati in modo statico e due posizionati in modo relativo. Uno dei box posizionati in modo relativo (div box-2a) è contenuto in div box-2.
Tramite i valori assegnati alle proprietà bottom e left il box-2a è ancorato alla posizione 0 verso il basso all'interno del box-2 e spostato di 232px verso destra rispetto alla posizione che assumerebbe all'interno del box-2.