position: relative;
Position har vist 4 mulige værdier. (static; relative; absolute; fixed;)
Default er static, som positionerer elementet i forhold til document flow uden nogen form for beregninger.
Relative er næsten identisk med static, bortset fra 2 vigtige forskelle :
1.: Elementets position er beregnet i forhold til document flow. Det betyder i teorien at det øverste venstre hjørne indeholder en form for anker.
2.: Elementet kan placeres offset i forhold til document flow. Ved at definerer top og left properties på elementet kan man flytte det i forhold til document flow. F.eks. style="position: relative; top: 10px; left: 10px;" så beregnes øverste venstre hjørne af elementet (anker) og derefter placeres elementet 10px til højre og 10px ned i forhold til ankeret.
Hvis man 'offset'er et relative placeret element så fylder det i document flow som om man IKKE havde lavet offset. Så hvis man laver left: 10px; så er der 10px 'luft' til venstre fpr elementet og til højre overlapper elementet efterfølgende elementer med 10px;
Absolute tager elementet ud af document flow og placerer det 'ovenpå' andet indhold. Elementet placeres med top og left.
Eksempel der viser lidt om ovennævnte muligheder :
<div> --> placeres i document flow uden nogen beregning.
<div style="position: relative; left: 10px; top: 10px;"> --> elementets position beregnes og flyttes 10px til højre og 10px ned. Elementet fylder i document flow som om det IKKE var placeret offset.
<div style="position: absolute; left: 10px; top: 10px;"> --> elementets position beregnes og tages ud af document flow.
Prøv selv at 'lege' med forskellige eksempler. F.eks. prøv at ligge mærke til forskellen på disse to :
<body>
<div style="width: 200px; height: 200px; margin: 0px auto; border: 1px solid red;">
<div style="position: absolute; left: 10px; top: 10px; border: 1px solid red;">Test</div>
</div>
<div style="position: relative; width: 200px; height: 200px; margin: 0px auto; border: 1px solid red;">
<div style="position: absolute; left: 10px; top: 10px; border: 1px solid red;">Test2</div>
</div>
Fixed placerer et element lige som absolute MEN altid i forhold til øverste venstre hjørne af dit browser vindue, derfor vil et fixed element ikke scrolle !
Mvh. Johan
Ny bruger
Nybegynder
Opret
Preview
