CSS3-logo   CSS position



Ved indsættelse af et element i en HTML-side bliver det automatisk registreret på en sådan måde, at browseren, under opbygning af stakkeorden (rækkefølgen for behandling af elementerne) forud for visning på skærm, betragter det som udstyret med {position : static;}.


Et element og dets hierarkisk underliggende elementer kan imidlertid tages ud af den normale stakkeorden og placeres individuelt. Dette gøres med {position : relative;}, {position : absolute;} eller {position : fixed;}.


Fra tid til anden kan det være hensigtsmæssigt, at kunne låse data fast til visning i forhold til et specifikt referencepunkt. Det kan gøres på måder med css-propertien position:


  • static
  • relative
  • absolute
  • fixed
  • inherit



Efter at den enkelte position-metode er angivet under kodning foretages den egentlige positionering typisk især med propertiene top, left, right og bottom.



Static

#statisk {position: static;}

Static er den normale default positionering af alle data. Der er derfor ikke noget referencepunkt at låse til. Anvendes kun sjældent; f.eks. ved ophør af en tidligere sat positionering.
Bliver placeret "som forventet" i dokumentflowet.



Relativ

#relativ {position: relative;
top: 20 px;
left: -40px;}

Referencepunktet, der låses til, er der hvor elementet ville have været, hvis det ikke var blevet flyttet. ("Sup"-tekst og "sub"-tekst er reelt eksempler på relativ positionering). Browseren tager et "relative" element ud af den normale stackorder men det følger med scrolling. De efterfølgende data flyder ikke ind og overtager den ledige plads.



Absolut

#absolut {position: absolute;
top: 150px;
left: 30px; }

Referencepunktet der låses til er ikke det blok-elementet som elementet defineres i, men det blok-element, der ligger udenom. HTML fungerer altid som "bagstopper". Browseren tager et "absolute" element ud af den normale stackorder men det følger med scrolling. Det placerer sig hen over og dækker "static" og "relative" data, der hvor det bliver placeret. De efterfølgende data flyder ind og overtager den ledige plads.



Fixed

#fixed {position: fixed;
top: 80px;
left: 50px;}

Referencepunktet der låses til er HTML-tagget i øverste venstre hjørne på browserens vindue / brugerens aktuelle skærm. Browseren tager et "fixed" element ud af det normale flow og det forbliver fastlåst uanset scrolling. Kan f.eks. bruges hvis header eller footer skal forblive statiske langs skærmens over- / underkant. Det placerer sig hen over og dækker "static", "relative" og "absolute" data, der hvor det bliver placeret. De efterfølgende data flyder ind og overtager den ledige plads.



Låsning af footer

Låsning af footer kaldes "sticky footer" (låsning af header kaldes tilsvarende "sticky header").

Ved "låsning" af footer benyttes følgende metode:

Footer HTML
Opbygges på normal måde.
Footer CSS
Udover de øvrige deklarationer indsættes i footerens "yderste" DIV (her i footer på 1000 px bredde):
position: fixed;
bottom: 0px;
left: 50%;
margin-left: -500px;
Deklarationerne skal placeres øverst og i den viste rækkefølge.
Content HTML
Nederst i den DIV-blok, der fortsat skal kunne scrolle placeres en "tom" DIV-blok.
<div id="contenttom"></div>
CONTENT CSS
Til den tomme DIV-blok knyttes følgende CSS selektor:
#contenttom {
height: 60px;}
Højden skal svare til højden på footeren.
Derved sikres, at de nederste data i Content-blokken også bliver synlige.



Låsning af header

Ved "låsning" af header benyttes samme fremgangsmåde, blot tilpasset, at den sker øverst på skærmen.



Låsning af menu

En vertikal menu i en sidekolonne kan "låses" ved benyttelse af samme fremgangsmåde, blot tilpasset, at den sker (typisk) et sted inde / nede på skærmen.



Inherit

Ingen kode. Arver automatisk fra sin "parent".






Kombination af absolute og relative

absolute og relative kan også kombineres med "special effects" som resultat: x.























x
x