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:
position: static;
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:
position: static;
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:
position: static;
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;

Het resultaat laten we zien op de voorbeeldpagina

Sponsor: BlueYellow

html-site.nl

Positioneren met CSS

Sitemap