position

Siden er opdateret 27. 12. 2011

Egenskaben position bruges til at sætte en placering på et html-element. Egenskaben position kan have en af følgende værdier:

absolute
Værdien løfter elementet ud af sidens normale flow - elementet fylder intet på siden, selv om det kan ses. Det vil - hvis der ikke på anden måde gøres den nødvendige plads - få dette og de omgivende elementer til at overlappe. Med egenskaberne top, right, bottom og left kan et absolute positioneret element flyttes rundt på siden.
fixed
Værdien fixed behandles på samme måde som absolute men har i tillæg den funktion, at elementet ikke flyttes, når siden scrolles.
inherit
Værdien inherit sætter position lig nærmeste forældreelements værdi.
relative
Værdien relative behandles på samme måde som static - men sætter samtidig i sit eget rum øverste venstre hjørne en position i forhold til hvilken et indeholdt absolute positioneret element kan placeres. Hvis relative positionerede elementer tillige flyttes fra deres normale position med egenskaberne left og top, har det ingen umiddelbart indflydelse på omgivende elementer - de placeres som hvis det relative positionerede element ikke var blevet flyttet.
static
Værdien static er den normale positionering, hvor elementerne placeres i browservinduet i den rækkefølge, de er noteret i kildekoden og elementerne optager den plads, deres indhold kræver. Egenskaberne top, right, bottom og left har ingen effekt på elementet.

Elementer, der har fået tildelt egenskaben position med en af værdierne absolute, fixed eller relative, kan tillige tildeles en eller to af disse egenskaber:

top
flytter elementet ned i forhold til nærmeste overordnede element med fast placering (browservinduet eller et relative positioneret element).
right
flytter elementet mod venstre i forhold til nærmeste overordnede element med fast placering (browservinduet eller et relative positioneret element).
bottom
flytter elementet op i forhold til nærmeste overordnede element med fast placering (browservinduet eller et relative positioneret element).
left
flytter elementet mod højre i forhold til nærmeste overordnede element med fast placering (browservinduet eller et relative positioneret element).

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 - css - egenskaber - position
sidens top
Brugere lige nu: 1
Home Mail