Opdateret d. 6.6.2002

position

Mulige vćrdier:	static \| relative \| absolute \| fixed
Brug af vćrdier:	Der vćlges én af ovenstĺende
Benyttes med:	Alle HTML koder bortset fra genereret indhold, som f.eks. nĺr der indsćttes et billede vha. `<img>` hvor bredde og hřjde ikke angives.

Alle elementer i et HTML dokument er placeret i en firkantet boks, som kan illustreres pĺ denne mĺde.:

Man tćnker bare ikke sĺ meget over det, fordi man aldrig ser den. F.eks. frembringer koden <body> én stor boks der indeholder hele siden. Koden <p> genererer en mindre boks som omgiver et afsnit. Uanset hvilken HTML kode der benyttes, frembringes en boks, set fra browserens synsvinkel..

Egenskaben position giver rig mulighed for at placere elementer som man har lyst. Herunder fĺr du en forklaring pĺ de ovennćvnte vćrdier der kan gives til position:

static: Med static behandles "boksen" pĺ normal vis, altsĺ med hensyntagen til placeringen af andre elementer i dokumentet.
relative: Boksen placeres relativt i forhold til den placering den normal ville have fĺet.
absolute: Boksen placeres prćcist der hvor det angives den skal vćre, uden hensyntagen til andre elementer i dokumentet.
fixed: Boksen placeres prćcist der hvor det angives den skal vćre, og den flytter sig ikke pĺ skćrmen selvom brugeren bevćger sig op/ned i dokumentet.

Du břr vćre opmćrksom pĺ at position kun virker i nyere browsere og at det muligvis ikke er alle vćrdierne nćvnt herover, der understřttes. Husk derfor at tjekke dine sider i bĺde Explorer og Netscape (som minimum). I skrivende stund vises eksemplerne i dette dokument kun korrekt i Explorer version 6.

position kan f.eks. bruges til at lave skyggeeffekt, ved at placere to bokse oven pĺ hinanden en smule forskudt:

Ovenstĺende er et billede, for at sikre din browser viser det korrekt. Hvis du vil afprřve det, kan du kopiere koden her.:

Indsćt denne kode i <head> -sektionen af et html dokument


<style type="text/css">

div.back    {background-color: #557766;
             position:absolute;
             left:30px;
             top:20px;
             width:300px;
             height:220px;}
div.section {background-color: #99DDBB;
             position:absolute;
             left:20px;
             top:10px;
             width:300px;
             height:200px;
             padding:10px;}
</style>

Indsćt denne kode i <body> -sektionen af et html dokument


<div class=back></div>
  
<div class=section>
<h2>Berřmt citat</h2>
<i>Woddy Allen. Fřdt 1. december 1935</i>

<p>Det er ingen hemmelighed, at organiseret 
kriminalitet i USA tjener over 40 milliarder
 dollars om ĺret. Det er et beundringsvćrdigt
 belřb, isćr nĺr man tćnker pĺ, hvor lidt 
mafiaen bruger pĺ kontorartikler.<br>
...</p>
</div>

Herunder vises eksempler pĺ brug af vćrdierne relative og absolute

De to eksempler vises vha. et billede og et afsnit lavet med HTML koden <p>. Det fřrste eksempel viser hvordan det ville se ud, uden brug af position.

Eksempel uden brug af position

Her er indsat et billede og et afsnit pĺ helt normal vis under hinanden ved brug af HTML koderne <img> og <p>. Der er ikke sĺ meget hokus pokus her. Dette afsnit placerer sig under billedet, da der ikke er angivet nogen form for positionering.

Eksempel pĺ brug af relative

P { position:relative;
    top:-20%;
    left:5%;}

Her er et afsnit, der er placeret 20% hřjere, og 5% lćngere inde fra venstre kant, end det normal ville vćre tilfćldet. Bemćrk at det indsatte billede ikke har rykket sig tilsvarende. Teksten ligger derfor nu oven i billedet. Man kan ogsĺ benytte egenskaberne right og bottom pĺ samme vis som top og left er benyttet her.

Eksempel pĺ brug af absolute

P { position:absolute;
    top:2700px;
    left:200px;}

Her er et afsnit, der er placeret 2700 pixel fra toppen af dette dokument, og 200 pixel fra dokumentets venstre kant. Denne metode gřr afsnittet fuldstćndig uafhćngigt af andre elementer pĺ siden. Det vil altid have denne position, uanset hvad der ellers placeres af tekst og billeder. Du břr se dette afsnit i aller sidste eksempel pĺ denne side.