Positioneren met CSS
Er zijn een aantal manieren waarop je elementen een positie kunt geven met behulp van CSS.
Wanneer je welke manier gebruikt hang af van een paar zaken. Ten eerste wat je als basis wilt
gebruiken voor het te plaatsen element. Ten tweede de invloed van andere elementen op dat ene
element. We hebben het in dit artikel over statisch positioneren, relatief positioneren,
absoluut positioneren en over vast positioneren.
Om de verschillende posities te verduidelijken, maken we gebruik van het volgende voorbeeld,
een document 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 hebben we gebruikt om verschillende manieren van positioneren te laten zien. Hierbij hebben we
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:
width: 200px;
height: 100px;
background-color: white;
padding: 2px;
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.
Relatieve positionering
Wanneer je relative gaat gebruiken, dan gaat het element verplaats worden naar een nieuwe positie,
vanaf de positie die normaal gesproken
ingenomen zou worden.
width: 200px;
height: 100px;
background-color: white;
padding: 2px;
position: relative;
border: 1px solid black;
top: 50px;
left: 100px;
Het volgende resultaat verschijnt dan in de browser:
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 in plaats van de oorspronkelijke
plek. Nu plaatsen we met css het blok 50 pixels vanaf de bovenkant van het scherm en 100 pixels vanaf
de linkerkant.
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:
Wat hier opvalt is dat de tweede alinea geen rekening meer houdt met het feit dat er nog een alinea
tussenstond terwijl dat bij de relatief positioneren wel het geval was.
Vaste positionering
Het element krijgt weer een vaste plek in relatie tot het scherm, maar blijft daar dan ook staan
ook al scroll je verder. Nadeel is wel dat niet alle browsers dit ondersteunen.
width: 200px;
height: 100px;
background-color: white;
padding: 2px;
position: fixed;
border: 1px solid black;
top: 50px;
left: 100px;
