Divs positioneren met CSS
De tijd van tabellen ligt al lang achter ons. Tegenwoordig gebruik je divs in combinatie met CSS om een pagina op te maken. In dit artikel richten we ons op het plaatsen van de divs: positioneren.
Inleiding
Div is een afkorting van division. Letterlijk vertaald in het Nederlands betekent dit sectie. Een div is dus een sectie van een HTML-document die je een bepaalde vormgeving kunt geven.
Positioneren
We gaan gebruik maken van de CSS-eigenschap position om de div te positioneren. Deze eigenschap kent 3 mogelijkheden:
- Relatief: bij relatief positioneren wordt de div verplaatst vanaf de plek waar hij eigenlijk hoort te staan.
- Absoluut: bij absoluut positioneren wordt de div verplaatst vanaf de randen van de body.
- Gefixeerd: ook bij gefixeerd positioneren wordt de div verplaatst vanaf de randen van de body, maar nu scrollt de div niet mee met de rest van de pagina.
Om dit wat duidelijker te maken zullen we elke manier een voorbeeldje geven.
Relatief
We gebruiken de volgende code in ons CSS-bestand:
Bij position kun je de manier van positioneren opgeven, in dit geval dus relative.
Bij left en top geef je aan hoever de div van zijn gebruikelijke plek moet worden verplaatst (in pixels).
Left en top kun je vervangen door right en bottom.
Bekijk het voorbeeld
Absoluut
We gebruiken de volgende code in ons CSS-bestand:
Bij position kun je de manier van positioneren opgeven, in dit geval dus absolute.
Bij left en top geef je aan hoever de div van van de randen van de body moet worden verplaatst (in pixels).
Left en top kun je vervangen door right en bottom.
Bekijk het voorbeeld
Gefixeerd
We gebruiken de volgende code in ons CSS-bestand:
Bij position kun je de manier van positioneren opgeven, in dit geval dus fixed.
Bij left en top geef je aan hoever de div van van de randen van de body moet worden verplaatst (in pixels).
Left en top kun je vervangen door right en bottom.
Bekijk het voorbeeld
Voordelen en nadelen
In dit artikel bespreken we de mogelijkheden tot absoluut en relatief positioneren. Het voordeel van deze manieren van positioneren is dat je alle onderdelen van de pagina heel precies een plek kunt geven. Er kleeft echter ook een nadeel aan: omdat alle elementen een vaste plaats op de pagina hebben, wordt de website een vrij statisch en onflexibel geheel. Voor een kleine website met weinig onderdelen is dit geen probleem. Heb je echter een grotere website, met meer onderdelen, dan kan deze manier van positioneren erg onhandig zijn. Kijk in dat geval eens naar ons artikel over Positioneren met CSS float.
Slot
Op deze manier kun je divs een plaatsje geven. In het artikel divs opmaken leer je hoe je divs een likje verf kunt geven.
