Positionering

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 placerar dem i förhållande till övriga, främst tidigare, 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 positioneringsegenskaperna.

relative

Elementet placeras först ut där det skulle hamnat om det vore static, sedan förflyttas det relativt till den positionen. 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, 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, 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 för 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.

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, istället för bredden på det förflyttade elementet!

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:

.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;.

Nästa aktivitet: Flexbox grunder