CSS:
#box1{
position: absolute;
top: 25px;
left: 25px;
width: 150px;
height: 100px;
background: #F60;
}
#box2{
position: absolute;
right: 25px;
bottom: 25px;
width: 150px;
height: 100px;
background: #999;
}
HTML:
<div id="box1"></div>
<div id="box2"></div>
RESULTAAT:
Normaal gesproken zorg ik ervoor dat het resultaat van de voorbeeld-code keurig in dit 'resultaat-kader' staat. Netjes
en overzichtelijk. Maar deze hele website volgt (min of meer) de natuurlijke flow van de pagina en ik heb de twee divjes in dit
voorbeeld (#box1 en #box2) een 'position: absolute' gegeven.
Zoals gezegd trekken elementen die absoluut gepositioneerd zijn zichzelf niets meer aan van de natuurlijke flow van de pagina. Zo ook
#box1 en #box2. Ze staan beiden keurig waar ze horen te staan:
- #box1 links bovenin de pagina (25px van de bovenkant van de viewport en 25px van de linkerkant)
- #box2 rechts onderin de pagina (25px van rechts en 25px van de onderkant).