Eigenschap position

De eigenschap position bepaalt de positioneringsmethode van elementen. Deze eigenschap wordt meestal samen gebruikt met de eigenschappen top, right, bottom, left, die respectievelijk de afstand boven, rechts, onder, links instellen.

Syntaxis

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

Waarden voor position

Waarde	Beschrijving
`absolute`	Absolute positionering. Het element wordt verwijderd uit de normale documentstroom en gepositioneerd ten opzichte van de dichtstbijzijnde gepositioneerde voorouder (indien aanwezig) of ten opzichte van het browservenster.
`relative`	Relatieve positionering. Het element wordt verschoven ten opzichte van zijn normale positie in de documentstroom, maar de ruimte die het innam, blijft gereserveerd.
`fixed`	Vaste positionering. Het element wordt verwijderd uit de normale documentstroom en gepositioneerd ten opzichte van het browservenster. Blijft op zijn plaats tijdens het scrollen van de pagina.
`static`	Statische positionering. Deze waarde betekent geen positionering en het element gedraagt zich normaal.
`sticky`	Plakkerige positionering. Het element gedraagt zich als `relative` totdat het een bepaalde positie bereikt tijdens het scrollen, waarna het vastplakt aan de opgegeven plek (als `fixed`).

Standaardwaarde: static.

Voorbeeld . Absolute positionering

Laten we het element in de linkerbovenhoek van het scherm plaatsen met kleine afstanden:

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

Voorbeeld . Absolute positionering

Laten we het element nu in de rechterbovenhoek van het scherm plaatsen met kleine afstanden:

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

Voorbeeld . Vaste positionering

Bij vaste positionering blijft het element op zijn plaats tijdens het scrollen:

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

Voorbeeld . Relatieve positionering

Bij relatieve positionering wordt het element verschoven ten opzichte van zijn normale positie, maar andere elementen gedragen zich alsof het element niet was verschoven:

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

Voorbeeld . Genesting

Als de ouder de eigenschap position heeft met de waarde relative, dan worden absoluut gepositioneerde elementen ten opzichte van de ouder gepositioneerd:

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

Voorbeeld . Genesting

Als de ouder de eigenschap position heeft met de waarde absolute, dan worden absoluut gepositioneerde elementen ten opzichte van de ouder gepositioneerd:

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

Voorbeeld . Plakkerige positionering

Als voor een element de eigenschap position de waarde sticky heeft, dan gedraagt het element zich als relative totdat het een bepaalde positie bereikt tijdens het scrollen, waarna het vastplakt aan de plek. Laten we een plakkerige header maken:

<h1>Hoofd 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;
}

Voorbeeld . Zonder positie

Als een element absolute positionering krijgt zonder positie op te geven, dan blijft het element staan op de plek, waar het stond zonder positionering, maar andere elementen zullen het niet meer opmerken:

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

Voorbeeld . Eén as

Bij absolute positionering kan de positie slechts op één as worden ingesteld. Als we bijvoorbeeld de eigenschap top instellen, dan wordt het element verticaal op de juiste positie geplaatst, maar horizontaal blijft het staan, waar het stond:

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

Voorbeeld . Alle posities

Bij absolute positionering kunnen posities aan alle kanten worden ingesteld, zonder breedte en hoogte in te stellen. In dit geval komt het element in het midden van het ouderelement te staan:

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

Zie ook

de eigenschap z-index,
die de stapeling van elementen bepaalt