Ibland behöver man positionera element mer precist än vad man kan åstadkomma med hjälp av float och clear. Detta kan man göra med hjälp av position. Man ska dock vara sparsam med att använda position, mycket av det man kan göra med denna egenskap går att lösa på bättre sätt och vissa saker kanske inte fungerar på alla typer av enheter, t.ex. fungerar inte position: fixed på alla enheter.

Positionering

Normalt sett positioneras element i ett layoutflöde som lägger placerar dem i förhållande till övriga element. Detta gäller såväl "fasta" som flytande element. Ibland behöver vi dock plocka ut saker helt och hållet ur flödet och placera dem exakt där vi vill ha dem. Dessa typer av element kallas för positionerade element. Det finns flera olika typer av positionering.

Olika typer av positionering

`static`

Detta är den vanliga typen av positionering. Om inget annat anges så är detta förvalet. Dylika element påverkas inte av de olika positionerings egenskaperna.

`relative`

Elementet placeras först där det skulle hamnat om det vore static, sedan förflyttas det relativt till den position det har. Efter sig, där den skulle legat, lämnar den ett tomrum.

`absolute`

Flyttar ur elementet helt och hållet ifrån det vanliga flödet, så det skapas inget statiskt utrymme för den (såsom är fallet med relative). Elementet placeras relativt till närmaste föräldraelement som har en positionering (om ingen sådan finns används rotelementet).

`fixed`

Flyttar ur elementet helt och hållet ifrån det vanliga flödet, så det skapas inget statiskt utrymme för den (såsom är fallet med relative). Elementet placeras relativt till webbläsarens fönster. När webbläsaren scrollar så ligger elementet kvar på sin position. Används ofta för att skapa sidhuvuden och -fötter. Fungerar dock inte på alla surfplattor och liknande.

Positionsangivelse

För alla ovanstående typer av positioneringar så gäller samma egenskaper för att ange hur förflyttningen ska se ut. Alla använder sig av top, bottom, left och/eller right. Hur dessa egenskaper tolkas skiljer sig dock lite för de olika positioneringstyperna.

Relativ positionering

De olika positioneringsegenskaperna anger hur långt ifrån "vanliga" positionen elementet ska flyttas. Om man t.ex. sätter top till -1ex, så kommer elementet att flyttas 1ex uppåt. Förflyttningen är alltså relativ till "nuvarande" position.

Absolut positionering

Placeringen kommer att ske relativt till föregående element som också det var positionerat (oavsett vilken typ av positionering den hade, förutom static), om inget sådant finns väljs rotelementet. Positionsangivelsen kommer att gälla på såväl det förflyttade elementet som det element förflyttningen ska vara relativt till. Om man t.ex. anger top: 0;, kommer toppen på nuvarande element att placeras i linje med toppen på det element boxen är relativ till. Om man å andra sidan sätter right: 0;, kommer elementen förflyttas så att deras högra sidor sitter på samma position.

För att förflytta en box till nedre, högra hörnet av föregående positionerat element, skulle man alltså göra följande:

Observera att procentuell förflyttning utgår ifrån föräldraelementet! Så om du försöker flytta något right: 100%; kommer det att förflyttas lika mycket som bredden på föräldern, inte på det förflyttade elementet!

.enBox {
  position: absolute;
  bottom: 0;
  right: 0;
}

(Kom ihåg att värdet noll inte behöver ha någon angiven enhet.) Om man däremot vill placera boxen en bit nedanför övre, högra hörnet kunde man göra något sådant här:

.enBox {
  position: absolute;
  top: 1em;
  right: 1em;
}

Om man vill att lådan ska vara en bit utanför det relativa elementet kan man göra något sådant här:

.enBox {
  position: absolute;
  top: -1em;
  right: -1em;
}

Fixerad positionering

Fungerar i stort sett precis som absolute, fast det man är relativ till är själva webbfönstret och när man skrollar runt webbsidan, så kommer det fixerade elementet att vara kvar på en och samma position.

Märk dock att detta inte fungerar på alla webbläsare. Vissa surfplattor bryr sig inte i position: fixed;.