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.
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 det skulle legat, lämnas ett tomrum.
absolute
Elementet flyttas helt och hållet ut ur det vanliga flödet. Det skapas inget statiskt utrymme för den (såsom är fallet med relative), så det upp blir inget tomrum där elementet skulle varit. Elementet placeras relativt till närmaste föräldraelement som har en positionering (om ingen sådan finns, används rotelementet).
fixed
Precis som med absolute flyttas elementet helt och hållet ur layoutflödet. Elementet placeras relativt till webbläsarfönstret. När webbläsaren scrollar så ligger elementet kvar på sin position. Används ofta för att skapa sidhuvuden och -fötter.
fixed fungerar inte på alla surfplattor. Det gör att man kan behöva lite specialkod för dessa. Oftast krävs en del JavaScript för att få till det på surfplattor.
Positionsangivelse
För alla ovanstående typer av positioneringar, används samma egenskaper för att ange hur förflyttningen ska ske. 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, dvs den position där elementet skulle ha hamnat om vi inte hade förflyttat det.
I exemplet kan vi se hur det förflyttade elementet flyter ovanför andra element. Lägg märke till att trots att det övre elementet förflyttats, så tar det fortfarande upp plats där det låg ifrån början. Även om inget ligger kvar där, har webbläsaren alltså lämnat kvar ett utrymme där elementet skulle kunna få plats.
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 förflyttningen ä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. De flesta surfplattor bryr sig inte i position: fixed;.
Problem med positionering
Positionering har samma problematik som float, nämligen att boxarna inte längre ligger med i layoutflödet. Om du positionerar en box som ligger inuti den andra, kommer den inte längre att bidra till höjden på sitt föräldraelement. Vilket kan leda till att det faller sönder. Återigen kan vi behöva en clear fix, se förra avsnittet om layoutproblem för mer info om clear fix.