Positionering - Versionshistorik

PGJ: /* Absolut positionering */

2019-01-13T15:03:34Z

Absolut positionering

← Äldre version		Versionen från 13 januari 2019 kl. 15.03
Rad 40:		Rad 40:
	<codepen pen="rooejE" tab="css,result" height="400">		<codepen pen="rooejE" tab="css,result" height="400">
	</codepen>		</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="~~rooejE~~" tab="css,result" height="400">		<codepen pen="zyyqPY" tab="css,result" height="400">
	</codepen>		</codepen>
	~~<div class="well well-cyanide-light">~~
	~~<syntaxhighlight lang="css">~~
	~~.enBox {~~
	~~position: absolute;~~
	~~top: 1em;~~
	~~right: 1em;~~
	}
	~~</syntaxhighlight>~~
	~~</div>~~
	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="~~rooejE~~" tab="css,result" height="400">		<codepen pen="GPPZyO" tab="css,result" height="400">
	</codepen>		</codepen>
	~~<div class="well well-cyanide-light">~~
	~~<syntaxhighlight lang="css">~~
	~~.enBox {~~
	~~position: absolute;~~
	~~top: -1em;~~
	~~right: -1em;~~
	}
	~~</syntaxhighlight>~~
	~~</div>~~

	=== Fixerad positionering ===		=== Fixerad positionering ===

PGJ: /* Absolut positionering */

2019-01-13T15:00:21Z

Absolut positionering

← Äldre version		Versionen från 13 januari 2019 kl. 15.00
Rad 34:		Rad 34:

	<div class="well well-warning">		<div class="well well-warning">
	Observera att procentuell förflyttning utgår ifrån ~~föräldraelementet~~! Så om du försöker flytta något <code>[[right]]: 100%;</code> kommer det att förflyttas lika mycket som bredden på ~~föräldern~~, istället för bredden på det förflyttade elementet!		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>		</div>

PGJ: /* Positionsangivelse */

2019-01-13T14:59:26Z

Positionsangivelse

← Äldre version		Versionen från 13 januari 2019 kl. 14.59
Rad 29:		Rad 29:

	=== Absolut positionering ===		=== 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 <code>static</code>)~~, 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 <code>top: 0;</code>, kommer toppen på nuvarande element att placeras i linje med toppen på~~ det element ~~boxen är relativ till. Om man å andra sidan sätter <code>right: 0;</code>, kommer elementen förflyttas~~ så ~~att deras högra sidor sitter på samma position~~.		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.

			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 föräldraelementet! Så om du försöker flytta något <code>[[right]]: 100%;</code> kommer det att förflyttas lika mycket som bredden på föräldern, istället för bredden på det förflyttade elementet!		Observera att procentuell förflyttning utgår ifrån föräldraelementet! Så om du försöker flytta något <code>[[right]]: 100%;</code> kommer det att förflyttas lika mycket som bredden på föräldern, 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:		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="~~GPPZpW~~" tab="css,result" height="400">		<codepen pen="rooejE" tab="css,result" height="400">
	</codepen>		</codepen>
	~~<div class="well well-cyanide-light">~~
	~~<syntaxhighlight lang="css">~~
	~~.enBox {~~
	~~position: absolute;~~
	~~bottom: 0;~~
	~~right: 0;~~
	}
	~~</syntaxhighlight>~~
	~~</div>~~
	~~(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:		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="rooejE" tab="css,result" height="400">
			</codepen>
	<div class="well well-cyanide-light">		<div class="well well-cyanide-light">
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">
Rad 58:		Rad 54:
	</div>		</div>
	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="rooejE" tab="css,result" height="400">
			</codepen>
	<div class="well well-cyanide-light">		<div class="well well-cyanide-light">
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">

PGJ: /* Absolut positionering */

2019-01-13T14:49:33Z

Absolut positionering

← Äldre version		Versionen från 13 januari 2019 kl. 14.49
Rad 34:		Rad 34:

	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:		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:
			<codepen pen="GPPZpW" tab="css,result" height="400">
			</codepen>
	<div class="well well-cyanide-light">		<div class="well well-cyanide-light">
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">

PGJ: /* Relativ positionering */

2019-01-13T14:48:41Z

Relativ positionering

← Äldre version		Versionen från 13 januari 2019 kl. 14.48
Rad 24:		Rad 24:
	=== 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 pen="GPPZpW" tab="css,result" height="400">
	</codepen>		</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 ===

PGJ: /* Relativ positionering */

2019-01-13T14:45:35Z

Relativ positionering

← Äldre version		Versionen från 13 januari 2019 kl. 14.45
Rad 24:		Rad 24:
	=== 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>

	=== Absolut positionering ===		=== Absolut positionering ===

PGJ: /* Fixerad positionering */

2019-01-13T14:35:36Z

Fixerad positionering

← Äldre version		Versionen från 13 januari 2019 kl. 14.35
Rad 67:		Rad 67:

	<div class="well well-danger">		<div class="well well-danger">
	Märk dock att detta inte fungerar på alla webbläsare. ~~Vissa~~ surfplattor bryr sig inte i <code>position: fixed;</code>.		Märk dock att detta inte fungerar på alla webbläsare. De flesta surfplattor bryr sig inte i <code>position: fixed;</code>.
	</div>		</div>

PGJ den 13 januari 2019 kl. 14.35

2019-01-13T14:35:04Z

← Äldre version		Versionen från 13 januari 2019 kl. 14.35
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.

	~~= 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.		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.

PGJ: /* Absolut positionering */

2019-01-11T21:48:59Z

Absolut positionering

← Äldre version		Versionen från 11 januari 2019 kl. 21.48
Rad 32:		Rad 32:

	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:		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:
			<div class="well well-cyanide-light">
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">
	.enBox {		.enBox {
Rad 39:		Rad 40:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
			</div>
	(Kom ihåg att värdet noll inte behöver ha någon angiven enhet.)		(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:		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:
			<div class="well well-cyanide-light">
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">
	.enBox {		.enBox {
Rad 49:		Rad 52:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
			</div>
	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:
			<div class="well well-cyanide-light">
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">
	.enBox {		.enBox {
Rad 57:		Rad 62:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
			</div>

	=== Fixerad positionering ===		=== Fixerad positionering ===

PGJ: /* Fixerad positionering */

2018-10-04T10:54:37Z

Fixerad positionering

← Äldre version		Versionen från 4 oktober 2018 kl. 10.54
Rad 59:		Rad 59:

	=== Fixerad positionering ===		=== Fixerad positionering ===
	Fungerar i stort sett precis som <code>absolute</code>, 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.		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.

	<div class="well well-danger">		<div class="well well-danger">