Positionering in CSS

• 29 oktober 2009
• Internet, Scripts, Tutorial
• 2 reacties

Naast float is de property “position” een veel gebruikte manier om een object te positioneren. Vooral onder beginnende webdesigner’s is er vaak onduidelijkheid over wat “absolute, fixed, relative, static en inherit” betekent. Aangezien het altijd handig is om te weten wat je precies kunt met “position”, zodat oneindig uitproberen niet nodig is, hier een korte uitleg met enkele voorbeelden.

Absolute

Eigenlijk spreken alle “position” properties redelijk voor zich, zo ook deze.

Absolute houdt in dat het object relatief gepositioneerd wordt ten opzichte van een vorig object wat niet “static” gepositioneerd is. De precieze positie wordt bepaald door de properties: “top”, “right”, “bottom” en “left”.

[css highlight="2"]element {
position: absolute;
top: 20px;
left: 10px;
}[/css]

Fixed

Wanneer een element “fixed” wordt gepositioneerd gebeurt dit ten opzichte van het browservenster.

Fixed houdt in dat het object absoluut gepositioneerd wordt. Het element wordt relatief gepositioneerd ten opzichte van het browservenster (viewport). De precieze positie wordt bepaald door de properties: “top”, “right”, “bottom” en “left”.

[css highlight="2"]element {
position: fixed;
top: 20px;
left: 10px;
}[/css]

Relative

Wanneer een element “relative” wordt gepositioneerd wordt dit ten opzichte van zijn normale positie gedaan.

Relative houdt in dat het object relatief gepositioneerd wordt. Dit houdt in dat het object zijn oorspronkelijke positie houdt, deze positie wordt bijgesteld door gebruik te maken van de properties: “top”, “right”, “bottom” en “left”.

[css highlight="2"]element {
position: relative;
top: 20px;
left: 10px;
}[/css]

Static

“Static” is de standaard waarde van de property “position”.

Static houdt in dat het object statisch gepositioneerd wordt. Dit houdt in dat het object zijn oorspronkelijke positie houdt, en properties zoals: “top”, “right”, “bottom” en “left” negeert.

[css highlight="2"]element {
position: static;
}[/css]

Inherit

Inherit houdt in dat het object de positionering overneemt van het object waar het onder valt, wanneer dat object geen positionering heeft krijgt het desbetreffende object dat ook niet.

[css highlight="2"]element {
position: inherit;
}[/css]

Werken met lagen

Door gebruik te maken van bepaalde van deze positionering’s methoden is het mogelijk dat bepaalde objecten door elkaar heen komen te staan, dit is op te lossen door te werken met lagen, net als in Photoshop. De property die daarvoor is bedoeld is “z-index”. Des te hoger de z-index, des te hoger de laag komt te staan. Wanneer bepaalde elementen dezelfde “z-index” hebben zullen deze alsnog door elkaar gaan staan.

Succes

Ik hoop dat dit artikel bij kan dragen aan betere positionering van objecten, succes! Dit is het derde artikel in een reeks van meerdere artikelen over CSS, het vorige artikel ging over faux columns in CSS.
Het volgende artikel in deze reeks zal gaan over het maken van lijsten in CSS, suggesties zijn altijd welkom.