Positionering: Skillnad mellan sidversioner
PGJ (diskussion | bidrag) |
PGJ (diskussion | bidrag) |
||
| (17 mellanliggande sidversioner av samma användare visas inte) | |||
| Rad 1: | Rad 1: | ||
Ibland behöver man positionera element mer precist än vad man kan åstadkomma med hjälp av <code>[[float]]</code> och <code>[[clear]]</code>. Detta kan man göra med hjälp av <code>[[position]]</code>. Man ska dock vara sparsam med att använda <code>[[position]]</code>, 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 <code>[[position]]: fixed</code> på alla enheter. | Ibland behöver man positionera element mer precist än vad man kan åstadkomma med hjälp av <code>[[float]]</code> och <code>[[clear]]</code>. Detta kan man göra med hjälp av <code>[[position]]</code>. Man ska dock vara sparsam med att använda <code>[[position]]</code>, 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 <code>[[position]]: fixed</code> 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. | |||
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. | |||
Det finns flera olika typer av positionering. | |||
== Olika typer av positionering == | == Olika typer av positionering == | ||
=== <code>static</code> === | === <code>static</code> === | ||
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. | 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. | ||
=== <code>relative</code> === | === <code>relative</code> === | ||
Elementet placeras först ut där det skulle hamnat om det vore <code>static</code>, sedan förflyttas det relativt till den positionen. Efter sig, där | Elementet placeras först ut där det skulle hamnat om det vore <code>static</code>, sedan förflyttas det relativt till den positionen. Efter sig, där det skulle legat, lämnas ett tomrum. | ||
=== <code>absolute</code> === | === <code>absolute</code> === | ||
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 <code>relative</code>), 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). | 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 <code>relative</code>), 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). | ||
=== <code>fixed</code> === | === <code>fixed</code> === | ||
Precis som med <code>absolute</code> flyttas elementet helt och hållet ur layoutflödet. Elementet placeras relativt till | Precis som med <code>absolute</code> 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. | ||
<div class="well well-danger"> | |||
<code>fixed</code> 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. | |||
</div> | |||
== Positionsangivelse == | == Positionsangivelse == | ||
För alla ovanstående typer av positioneringar, | 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 <code>top</code>, <code>bottom</code>, <code>left</code> och/eller <code>right</code>. Hur dessa egenskaper tolkas skiljer sig dock lite för de olika positioneringstyperna. | ||
=== Relativ positionering === | === Relativ positionering === | ||
De olika positioneringsegenskaperna anger hur långt ifrån "vanliga" positionen elementet ska flyttas. Om man t.ex. sätter <code>top</code> till <code>-1ex</code>, så kommer elementet att flyttas <code>1ex</code> 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. | De olika positioneringsegenskaperna anger hur långt ifrån "vanliga" positionen elementet ska flyttas. Om man t.ex. sätter <code>top</code> till <code>-1ex</code>, så kommer elementet att flyttas <code>1ex</code> 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. | ||
<codepen pen="GPPZpW" tab="css,result" height="400"> | |||
</codepen> | |||
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 === | === Absolut positionering === | ||
Placeringen kommer att ske relativt till föregående element som också det var positionerat (oavsett vilken typ av positionering | Placeringen kommer att ske relativt till det närmaste föregående element som också det var positionerat (oavsett vilken typ av positionering det har, förutom <code>static</code>). Om det inte finns något positionerat element så väljs rotelementet. | ||
Observera att procentuell förflyttning utgår ifrån | Positionsangivelsen kommer dels att beräknas utifrån det förflyttade elementets egenskaper, dels utifrån det relativa elementets egenskaper. Om man t.ex. anger <code>top: 0;</code>, kommer toppen på det förflyttade element att placeras i linje med toppen på det element det är relativt till. Om man å andra sidan sätter <code>right: 0;</code>, kommer elementen förflyttas så att deras högra sidor möts på samma position. | ||
<div class="well well-warning"> | |||
Observera att procentuell förflyttning utgår ifrån det relativa elementets storlek! Så om du försöker flytta något <code>[[right]]: 100%;</code> kommer det att förflyttas lika mycket som bredden på det relativa elementet, istället för bredden på det förflyttade elementet! | |||
</div> | |||
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 (Kom ihåg att värdet noll inte behöver ha någon angiven enhet.): | |||
<codepen pen="rooejE" tab="css,result" height="400"> | |||
</codepen> | |||
Lägg märke till att boxens storlek sätt till <code>auto</code>, istället för <code>100%</code>. Det är en av sakerna som sker automatiskt när man positionerar något. | |||
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: | 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: | ||
< | <codepen pen="zyyqPY" tab="css,result" height="400"> | ||
</codepen> | |||
</ | |||
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: | 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: | ||
< | <codepen pen="GPPZyO" tab="css,result" height="400"> | ||
</codepen> | |||
</ | |||
=== Fixerad positionering === | === Fixerad positionering === | ||
Fungerar i stort sett precis som <code>absolute</code>, fast | Fungerar i stort sett precis som <code>absolute</code>, 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. | <div class="well well-danger"> | ||
Märk dock att detta inte fungerar på alla webbläsare. De flesta surfplattor bryr sig inte i <code>position: fixed;</code>. | |||
</div> | |||
== Problem med positionering == | == Problem med positionering == | ||
Nuvarande version från 13 januari 2019 kl. 17.03
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 det närmaste föregående element som också det var positionerat (oavsett vilken typ av positionering det har, förutom static). Om det inte finns något positionerat element så väljs rotelementet.
Positionsangivelsen kommer dels att beräknas utifrån det förflyttade elementets egenskaper, dels utifrån det relativa elementets egenskaper. Om man t.ex. anger top: 0;, kommer toppen på det förflyttade element att placeras i linje med toppen på det element det är relativt till. Om man å andra sidan sätter right: 0;, kommer elementen förflyttas så att deras högra sidor möts på samma position.
Observera att procentuell förflyttning utgår ifrån det relativa elementets storlek! Så om du försöker flytta något right: 100%; kommer det att förflyttas lika mycket som bredden på det relativa elementet, 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 (Kom ihåg att värdet noll inte behöver ha någon angiven enhet.):
Lägg märke till att boxens storlek sätt till auto, istället för 100%. Det är en av sakerna som sker automatiskt när man positionerar något.
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:
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:
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.