Divs positioneren met CSS
| Categorie | CSS |
| Geplaatst | 17-12-2005 |
| Laatste aanpassing | 25-07-2010 |
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
Je kunt divs op 3 manieren positioneren:
- 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
advertentie
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
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.
