Egenskapen position

Egenskapen position anger hur element positioneras. Denna egenskap används oftast tillsammans med egenskaperna top, right, bottom, left, som sätter marginaler uppifrån, till höger, under, till vänster respektive.

Syntax

selektor {
	position: absolute | relative | fixed | static | sticky;
}

Värden för position

Värde	Beskrivning
`absolute`	Absolut positionering. Elementet tas bort från dokumentets normala flöde och positioneras i förhållande till närmast positionerade förfader (om sådan finns) eller i förhållande till webbläsarfönstret.
`relative`	Relativ positionering. Elementet förskjuts i förhållande till sin normala position i dokumentflödet, men utrymmet som det upptar förblir reserverat.
`fixed`	Fixerad positionering. Elementet tas bort från dokumentets normala flöde och positioneras i förhållande till webbläsarfönstret. Stannar på plats vid sidrullning.
`static`	Statisk positionering. Värdet betyder avsaknad av positionering och elementet beter sig som vanligt.
`sticky`	Klibbig positionering. Elementet beter sig som `relative` tills det når en given position vid scrollning, varefter det fastnar på den angivna platsen (som `fixed`).

Standardvärde: static.

Exempel . Absolut positionering

Låt oss placera elementet i övre vänstra hörnet av skärmen med små marginaler:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Exempel . Absolut positionering

Och nu placerar vi elementet i övre högra hörnet av skärmen med små marginaler:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	right: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Exempel . Fixerad positionering

Med fixerad positionering kommer elementet att stanna kvar på plats vid scrollning:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: fixed;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Exempel . Relativ positionering

Med relativ positionering förskjuts elementet i förhållande till sin normala position, men andra element beter sig som om elementet inte hade förskjutits:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	display: flex;
	justify-content: flex-row;
}

.elem {
	margin: 0 3px;
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

.elem2 {
	position: relative;
	top: 20px;
	left: 30px;
	background-color: #e6addf;
}

Exempel . Kapsling

Om föräldern har egenskapen position satt till värdet relative, kommer absolut positionerade element att positioneras i förhållande till föräldern:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Exempel . Kapsling

Om föräldern har egenskapen position satt till värdet absolute, kommer absolut positionerade element att positioneras i förhållande till föräldern:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: absolute;
	top: 30px;
	left: 30px;
	
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Exempel . Klibbig positionering

Om ett element har egenskapen position satt till värdet sticky, så beter sig elementet som relative tills det når en given position vid scrollning, varefter det fastnar på plats. Låt oss skapa en klibbig header:

<h1>Main Site Header</h1>

<div class="header">header header header</div>

<div class="main">
	some long text
</div>

h1 {
	text-align: center;
}

.header {
	position: sticky;
	top: 0;
	
	padding: 20px;
	background: #f0f0f0;
	text-align: center;
	font-weight: bold;
}

.main {
	width: 400px;
	margin: 20px auto;
	border: 1px solid #ccc;
	padding: 20px;
	text-align: justify;
}

Exempel . Utan position

Om ett element ges absolut positionering utan att position anges, kommer elementet att stanna kvar på den plats, där det stod utan positionering, men andra element kommer att sluta lägga märke till det:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Exempel . En axel

Med absolut positionering kan positionen anges endast längs en axel. Till exempel, om vi sätter egenskapen top, kommer elementet vertikalt att inta rätt position, men horisontellt kommer det att stanna kvar, där det stod:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	top: 20px;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Exempel . Alla positioner

Med absolut positionering kan positioner anges från alla sidor, utan att ange bredd och höjd. I detta fall kommer elementet att placera sig i mitten av förälderblocket:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 20px;
	bottom: 20px;
	left: 20px;
	right: 20px;
	background-color: #add8e6;
}

Se även

egenskapen z-index,
som anger överlappning av element