Hoe kun je een element positioneren met CSS?

Er is een aantal manieren waarop je elementen (bijvoorbeeld een plaatje of een stukje tekst) een positie kunt geven met behulp van CSS. Wanneer je welke manier gebruikt hang af van een paar zaken.
Ik ga het in dit artikel hebben over statisch positioneren, relatief positioneren, absoluut positioneren en over vast positioneren.

Om de verschillende posities te verduidelijken, maak ik gebruik van het volgende voorbeeld, een stukje tekst dat opgebouwd is uit drie alinea’s.

<div>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut </div>
 
<div id="position">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</div>
 
<div>sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit 
amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut!</div>

De middelste alinea (met id=”position”) hebben ik gebruikt om verschillende manieren van positioneren te laten zien. Hierbij is een aantal extra stijlen toegevoegd om het allemaal wat duidelijker te maken.

Statische positionering

Statisch positioneren is de normale gang van zaken. Je hoeft deze specificatie niet mee te geven wanneer een element op de plek moet komen te staan waar deze volgens de code zou komen te staan.
Voor ons voorbeeld gebruiken we de volgende code:

#position { 
width: 200px;
background-color: #333;
color: white;
padding: 10px;
border: 1px solid black;
position: static;
}

Het volgende resultaat verschijnt dan in de browser:
Zoals je ziet wordt de pagina op een normale manier weergegeven.

voorbeeld position static

Relatieve positionering

Wanneer je relative gaat gebruiken, dan gaat het element (in ons geval het blokje tekst) verplaatst worden naar een nieuwe positie vanaf de plek die normaal gesproken ingenomen zou worden.

#position {
width: 200px;
background-color: #333;
color: white;
padding: 10px;
border: 1px solid black;
position: relative;
top: 50px;
left: 100px;
}

Het volgende resultaat verschijnt dan in de browser:

voorbeeld position relative

Zoals je ziet wordt de pagina nu op 50px vanaf de bovenkant en 100px vanaf de linkerkant vanaf de oorspronkelijke positie neergezet.

Absolute positionering

Hiermee zet je het element op een plek neer die afhangt van het scherm. Nu plaatsen we met CSS het tekstblok 50 pixels vanaf de bovenkant van het scherm en 100 pixels vanaf de linkerkant.

#position {
width: 200px;
height: 100px;
background-color: white;
padding: 2px;
position: absolute;
border: 1px solid black;
top: 50px;
left: 100px;
}

Het volgende resultaat verschijnt dan in de browser (in de eerste afbeelding de breedte zoals die ook in de vorige voorbeelden te zien was, in de tweede afbeelding als de browser wat smaller gemaakt wordt):

Voorbeeld position absolute

voorbeeld position absolute in smalle browser

Wat hier opvalt is dat de tweede alinea geen rekening meer houdt met het feit dat er nog een alinea tussenstond terwijl dat bij het relatief positioneren wel het geval was.

Vaste (fixed) positionering

Het element krijgt weer een vaste plek in relatie tot het scherm, maar blijft daar dan ook staan ook al scroll je verder.

#position {
width: 200px;
background-color: #333;
color: white;
padding: 10px;
border: 1px solid black;
position: fixed;
top: 50px;
left: 100px;
}

Dit is op deze pagina niet te tonen, maar als voorbeeld heb ik een andere pagina aangemaakt (link) waarin dit wel getoond wordt.