Position

Met CSS-positionering kan je de positie van een boxelement op het scherm zelf bepalen. In onderstaande
voorbeelden maken we meestal gebruik van een div, maar in principe(!) kan je elk element op blokniveau
gebruiken.
Er zijn vier manieren waarop je een boxelement kan positioneren:

static
Dit is de standaardinstelling.
Het element wordt geplaatst afhankelijk van de andere elementen en is niet aan te passen met ‘top’, ‘left’,
‘right’ of ‘bottom’, zoals bij de volgende methode.
fixed
Het element wordt geplaatst ten opzichte van het browservenster. Zelfs wanneer je scrollt zal het element
op zijn plek blijven. Andere elementen trekken zich niets aan van dit element. Fixed elementen kunnen
andere elementen overlappen.
Voorbeeld:
div.vasteplek
{
position:fixed;
top:30px;
right:5px;
}
relative
Bij een relatieve positionering wordt een element verplaatst ten opzichte van zijn originele
positie. Dus als de eigenschap “left” op “-20px” staat, wordt het element 20 pixels naar links
verschoven.
Voorbeeld:
p.pos_links
{
position:relative;
top: 5 px;
left:-20px;
}
absolute
Een absoluut gepositioneerd element krijgt zijn positie ten opzichte van het element waar hij in staat (= de
‘parent’). Als deze parent tenminste niet static is. Een absoluut gepositioneerd element kan een ander
element overlappen. Andere elementen trekken zich niks aan van het element.
Voorbeeld:
h2
{
position:absolute;
left:100px;
top:150px;
}
Z-index
Wanneer verschillende elementen elkaar overlappen kan je de volgorde (‘diepte’) van deze elementen
bepalen met de z-index. Als v erscillende elementen een z-index hebben, zal het element met de hoogste
z-index boven liggen. Een z-index kan ook negatief zijn. Voorbeeld:
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}