Positioning (absolute, relative en fixed)

Wanneer je je HTML website gaat opbouwen wil je natuurlijk de volledige vrijheid hebben om je ontwerp uit te voeren. Met behulp van de CSS eigenschap positioning kun je heel goed aangeven waar een element moet komen te staan. Ook kun je aangeven hoe het element zich moet gedragen ten opzichte van andere elementen. Mag een vlak over een ander vlak heen staan? Of niet? Moeten vlakken automatisch netjes onder elkaar komen te staan? Al deze zaken regel je met positioning.

Video’tje kijken?

Links

Bij Codecademy kun je een stap-voor-stap tutorial volgen over positionering: http://www.codecademy.com/courses/advanced-css-positioning/0/1

Y.Bruin

Meestal leer je, wanneer je begint met HTML, om ‘gewoon’ maar div-elementen onder elkaar te plaatsen en eventueel met behulp van het float attribuut aan te geven of deze naar links of rechts mochten zweven. Dit noemen we static positionering; de div-elementen staan gepositioneerd ten opzichte van de normale flow van de pagina (de andere objecten). Dit lijkt erg op relative positioning maar relatief gepositioneerde elementen kunnen elkaar overlappen terwijl statisch gepositioneerde elementen dat niet kunnen. Zoals
relative

Een andere manier van positioneren is fixed positioning; dan blijft een div-element staan op een aangegeven plek ten opzicht van de linker bovenhoek van het browservenster. Handig voor een menu wat je altijd in beeld wilt houden ongeacht of er een scrollbalk is.

fixed_binnen-container

Bij absolute positioning krijgen elementen een vaste plek ten opzicht van het element waar ze in staan, dit kan een ander div-element zijn of de body. Meestal gebruik je echt top en left waarden om een element op de goede plek te zetten.

buiten-de-box

Diverse soorten positioneringen zijn wel tegelijkertijd in één website te gebruiken maar niet binnen één element!

 

Waar gebruiken we wat het meest voor?

Dit zal erg van je eigen voorkeur afhangen. Soms kan het makkelijk zijn om elementen absoluut te positioneren maar soms is relatief makkelijker.