Relatief positioneren van html elementen.

Bron: http://www.sceneone.nl/positionering/relatief.php

Titel: HTML en CSS tutorials

Auteur: Wybe Weysters

We hebben het gehad over de normale flow van een html pagina. Wanneer je niets doet aan de positionering van je elementen volgen deze de flow van de pagina en vinden ze op die manier hun 'natuurlijke' positie op de pagina.

Als je elementen relatief gaat positioneren betekent dit dat hun positie gerelateerd wordt aan de positie die ze gehad zouden hebben wanneer je niets gedaan zou hebben.
Bekijk het volgende voorbeeld maar eens

CSS: span{
background: #F60;
}

span.relatief{
position: relative;
top: 40px;
left: 150px;
background: #F60;
}
HTML: <p>In deze eerste paragraaf hebben we een <span>gewone span</span> met alleen een achtergrondkleur. Deze span neemt zijn 'natuurlijke' plaats in. Niets bijzonders dus.</p>

<p>In deze tweede paragraaf hebben we <span class="relatief">geen gewone span</span>, maar een waarvan de positionering in de css beinvloed is. Deze span is gepositioneerd, 40px van de bovenkant en 150px van links ten opzichten van zijn 'natuurlijke' plaats.</p>

bekijk het resultaat

Je ziet dat bij het relatief positioneren van een span, deze zijn nieuwe positie krijgt ten opzichte van zijn 'natuurlijke' positie en dat zijn 'natuurlijke' positie open blijft.
Het voordeel van deze manier van positioneren is dat je de natuurlijke flow van de pagina met rust laat (min of meer). Die relatief gepositioneerde span beweegt gewoon mee met de paragraaf waarin hij thuishoort.

Als je de span een absolute positionering had gegeven dan had je hem ook door middel van een x- en y-coördinaat kunnen positioneren, maar dan waren er twee grote verschillen geweest ten opzichte van de relatieve methode:

Een beetje een lullig voorbeeld

Het bovenstaande voorbeeld met de span laat goed zien wat relatieve positionering met je elementen doet, maar het is natuurlijk een beetje een lullig voorbeeld. Wie wil dit nou met een span doen? Precies, niemand.
Maar je begrijpt dat deze manier van positioneren voor al je elementen werkt.

Stel dat je een header box (een div dus) hebt en een navigatie box. Je hebt besloten om gebruik te maken van de flow van de pagina om je website te structureren (goed besluit!). Maar de navigatie box moet toch net even een paar pixels meer naar rechts en naar beneden. Je kunt nu position: relative gebruiken om je navigatie box tot op de pixel nauwkeurig te positioneren zonder de flexibiliteit van je stuctuur aan te tasten (min of meer).
Eerst een voorbeeld waarin je niets doet aan de positionering:

CSS: div#box1{
width: 100%;
height: 125px;
border: 1px solid #000;
}

div#box2{
width: 125px;
height: 300px;
border: 1px solid #000;
}
HTML: <div id="box1">box1</div>
<div id="box2">box2</div>

bekijk het resultaat

Nu wil je dus die navigatie box wat nauwkeuriger kunnen positioneren:

CSS: div#box1{
width: 100%;
height: 125px;
border: 1px solid #000;
}

div#box2{
position: relative;
top: 10px;
left: 25px;
width: 125px;
height: 300px;
border: 1px solid #000;
}
HTML: <div id="box1">box1</div>
<div id="box2">box2</div>

bekijk het resultaat

Bedrieglijke schijn

Toch moet je uitkijken met deze manier van positioneren. De wakkere lezer heeft gemerkt dat ik in het voorgaande iedere keer een slag om de arm gehouden heb (min of meer).
Het relatief positioneren van je elementen kan namelijk wel degelijk vervelende gevolgen hebben voor de flow van de pagina.

Het gaat daarbij niet zozeer om de elementen die in de structuur vóór het relatieve element komen, maar om de elementen die daarna komen of een eventueel parent-element.
Eerst weer even een voorbeeld waarbij ik aan de positionering niets doe:

CSS: div#box1{
width: 100%;
height: 125px;
border: 1px solid #000;
}

div#box2{
width: 125px;
height: 300px;
border: 1px solid #000;
}

div#box3{
width: 100%;
height: 200px;
border: 1px solid #000;
}
HTML: <div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>

bekijk het resultaat

En dan hetzelfde voorbeeld maar met een relatief gepositioneerde box2:

CSS: div#box1{
width: 100%;
height: 125px;
border: 1px solid #000;
}

div#box2{
position: relative;
top: 50px;
left: 25px;
width: 125px;
height: 300px;
border: 1px solid #000;
}

div#box3{
width: 100%;
height: 200px;
border: 1px solid #000;
}
HTML: <div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>

bekijk het resultaat

Zoals je ziet niet helemaal wat je zou willen. Box2 schuift over box3 heen. Box3 lijkt zichzelf weinig aan te trekken van de relatieve positionering van box2. In het screenshot hieronder wordt duidelijk wat box3 doet.

screenshot relatieve positionering

Het grijze vlak stelt de positie voor die box2 gehad zou hebben als ik er niets aan gedaan zou hebben, de natuurlijke positie van box2. Dat is waar box3 naar kijkt. Het feit dat box2 vervolgens 50px naar beneden en 25px naar rechts is opgeschoven is iets waar box3 zichzelf niets van aantrekt.

We kunnen dus tot de conclusie komen dat een element wat relatief gepositioneerd wordt tot op zekere hoogte de natuurlijke flow van de pagina volgt, maar niet helemaal. De relatieve her-positionering tilt het element toch gedeeltelijk boven de flow van de pagina uit.
Handig om te weten, misschien komt het je nog eens van pas en kun je het gebruiken. Maar verder: oppassen met relatief positioneren!

naar het begin van de pagina