Siden er opdateret 23.1.2008
Eksempel på absolut positioneret element:
<div style="position:absolute; top:10px; left:180px; width:500px;">Her er det potitionerede element</div>
Det positionerede element anbringes 10 px fra toppen af browserens viewport og 180 px fra venstre kant.
Eksempel på procent-positioneret element:
<div style="position:absolute; top:10px; left:50%; width:500px;
margin-left:-50px;">Her er det potitionerede element</div>
Ved at sætte den vandrette position til 50% og venstre margin til negativ ½ elementbredde opnås, at elementet i alle bredder browservindue centreres vandret i vinduet.
I eksemplet herover vil du kunne se, at uanset bredden på dit åbne browservindue vil det lille billede være placeret horisontalt centreret i rammen.
Eksempel på brug af position:relative:
<div style="position:relative; top:0px; left:0px; width:100%; height:150px; border:1px solid #999999;">
<div style="position:absolute;top:10px;left:100px;">
<img src="images/maleri.jpg" width="100" height="67" alt="">
</div>
</div>
Rammen herover er indsat med 'position:relative;top:0px;left:0px', hvilket indsætter rammen på det sted på siden, hvor den er skrevet.
I rammen er indsat et billede med 'position:absolute;top10px;left:100px'.
Dette ville normalt (uden den relative positionering på elementet udenom) bevirke, at billedet blev indsat 10px fra browservinduets top og 100px fra vinduets venstre kant. Men fordi billedet er indsat i en relativt positioneret blok, bliver den absolutte placering defineret i forhold til denne bloks øverste venstre hjørne.