Eksempler på brug af position

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.

^ Tilbage til sidens top

Valid XHTML og CSS / Copyright © Hjemmesideskolen marts 2003
Hjemmesideskolen
Du er her: Forsiden - html - testsider - Eksempler på brug af position
sidens top
Brugere lige nu: 1
Home Mail