Absolute positionering van elementen in CSS

In deze les behandelen we absolute positionering van elementen. Het maakt het mogelijk om elementen te positioneren volgens opgegeven coördinaten van de pagina. Het is bijvoorbeeld mogelijk om een element te positioneren op 100px vanaf de bovenkant van de pagina en 200px vanaf links. Het element verplaatst zich daarnaartoe, ongeacht wat zich daar bevindt en komt gewoon boven andere elementen te liggen. Men zegt dat het element zich onttrekt aan het normale documentstroom: alle andere elementen gedragen zich alsof ons element er niet is.

Om een element absoluut te positioneren, moet je de eigenschap position instellen op de waarde absolute. Naast deze eigenschap zijn er nog twee nodig: één voor de verticale coördinaat, en de andere voor de horizontale.

Voor de verticale as moet je een afstand instellen, vanaf de bovenkant of vanaf de onderkant. De afstand vanaf de bovenkant wordt ingesteld met de eigenschap top, en de afstand vanaf de onderkant met de eigenschap bottom. Voor de horizontale as moet je een afstand instellen, vanaf links of vanaf rechts. De afstand vanaf links wordt ingesteld met de eigenschap left, en de afstand vanaf rechts met de eigenschap right.

Laten we naar voorbeelden kijken.

Voorbeeld

Laten we eerst twee blokken maken zonder positionering (let op het feit dat de elementen niet tegen de rand van het venster aanzitten, omdat body standaard een margin heeft):

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Voorbeeld

Laten we nu het groene blok absolute positionering geven, door het te plaatsen op de positie 150px vanaf de bovenkant en 100px vanaf links:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 150px;
	left: 100px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Voorbeeld

Laten we nu het groene blok plaatsen op de positie 0px vanaf de bovenkant en 0px vanaf links:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0px;
	left: 0px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Voorbeeld

Laten we nu het groene blok plaatsen op de positie 0px vanaf de bovenkant en 0px vanaf rechts:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Voorbeeld

Laten we nu het groene blok plaatsen op de positie 0px vanaf de onderkant en 0px vanaf rechts:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Voorbeeld

Laten we nu het groene blok plaatsen op de positie 0px vanaf de onderkant en 0px vanaf links:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	left: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Praktische opdrachten

Gebruik absolute positionering om de blokken als volgt te plaatsen: