Brug af position

Om absolute og relative er der en god artikkel på http://www.html.dk/tutorials/css/lektion14.asp
Fixed gør at indholdet ikke vil scrolle med, når man scroller på siden.
Kan f.eks. bruges til at placere en menu øverst i venstre hjørne, er ikke understøttet i IE, er i andre gængse browsere.
static er default indstilling og svarer til, at du ikke bruger position (derfor i almindelighed overflødig).
Elementerne vil blive vist som de er skrevet i htmlkoden.
Nej, generelt kan de ikke blandes og der vil heller ikke være behov for det.

static er det normale og uden mulighed for at placere den med left,top osv.
relative er i forhold til elementes umiddelbare placering.
absolute er i forhold til det element det ligger indeni, dog ikke hvis denne er static. Mange tror fejlagtigt det er i forhold til siden, men hvis man tager følgende eksempel:
<body>
<div style="position:relative;left:100px;top:100px;">
<span style="position:absolute;left:40px;top:-10px;">SPAND</span>
</div>
vil span-elementet blive placeret i forhold til kanten af div-elementet og ikke body'en, da div-element er placeret med position:relative.

fixed fungerer ligesom absolute, men har altid den samme position på skærmen, og scroller altså med siden hvis man ruller op eller ned. Virker dog ikke i IE.

den officiele forklaring er her (kan dog være lidt svær at forstå):
http://www.w3.org/TR/CSS2/visuren.html#propdef-position

de kan ikke mixes, men de kan bruges sammen. F.eks. kan det være smart at lægge en boks med position: relative uden om et element med position: absolute. For så kan man angive top og left i forhold til dette omgivende element i stedet for bare i forhold til vinduet (som jo forandrer sig ved resize).

<ole>

Havde det yderste div i skovenborgs eksempel _ikke_ været positioneret, ville inner-div'et have placeret sig i forhold til body-elementet - da dette som default regnes som værende positioneret.
Nu _er_ det positioneret - og inner div'et placerer sig derfor i forhold til dette.

Det var der egentlig ikke noget nyt i - men det kan måske tydeliggøregøre forskellen  :)

/mvh
</bole>

ups... det var jo præcis hvad skovenborg allerede nævnte 25/03-2004 23:14:19

men, ja, han har jo så ret...

hvor er vi dog enige allesammen ... ;-)

jeg har i øvrigt en lille demo af netop dette med relative og absulute her: http://e-tidsskrift.dk/dev/position.php

Jeg prøver mig også lige med en lille forklaring, håber det bliver en tilføjelse og ikke en forvirring af emnet...

Relative følger det normale siteflow, dvs placere sig som et hvert andet element. Man har dog mulighed for at sætte parametre som "top", "left", "z-index", "overflow" m.fl. som ikke kan sættes på elementer uden position (relative/absolute).
Der er også flere små IE-bugs som kan løses ved at sætte position:relative; på elementet.

Absolute sætter sig ud over siteflowet, og vil placere det pågældende element i forhold til det ovenstående tag (i element-hirakiet), som har parametret position:absolute/relative. Hvis ingen tag's har det, så placere elementet sig i forhold til body'en (dvs øverste venstre hjørne).

//bjoarn

Mjaaahhhh .... dette er ikke korrekt:

"Absolute sætter sig ud over siteflowet, og vil placere det pågældende element i forhold til det ovenstående tag (i element-hirakiet), ..."

Det er ikke det forgående element i hierakiet (previous-sibling-elementet), men derimod det omkransende (parent-elementet), der afgør, hvordan positioneringen skal fortolkes.

Og så er der i øvrigt andre bugs i Mozilla, der kan 'repareres', hvis man sætter positioneringen til 'relative' - men den slags detaljer er en helt anden diskusion  :)
/mvh

lukker