Absoluut positioneren van html elementen.

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

Titel: HTML en CSS tutorials

Auteur: Wybe Weysters

Wanneer je een element een position: absolute geeft ontrek je daarmee het element aan de normale flow van de pagina. De natuurlijke hiërarchie van de pagina geldt voor dat element niet meer.
Je kunt het element zelf coördinaten geven en op die manier tot op de pixel nauwkeurig positioneren waar jij het hebben wilt. Geef je een absoluut gepositioneerd element geen coördinaten, dan krijgt het automatisch de coördinaten: top: 0; en left: 0;

Een voorbeeld

CSS: #box1{
position: absolute;
top: 25px;
left: 25px;
width: 150px;
height: 100px;
background: #F60;
}

#box2{
position: absolute;
right: 25px;
bottom: 25px;
width: 150px;
height: 100px;
background: #999;
}
HTML: <div id="box1"></div>
<div id="box2"></div>

bekijk het resultaat

Elk voordeel heb z'n nadeel en omgekeerd

Het grote voordeel van het werken met absoluut positioneren is de snelheid waarmee je een opzet kunt maken voor de layout van je website en de eenvoudige manier waarop je 'zeggenschap-tot-op-de-pixel' hebt over waar wat komt te staan.
Bekijk het onderstaande voorbeeld maar eens:

CSS: #header{
position: absolute;
top: 5px;
left: 5px;
width: 750px;
height: 100px;
border: 1px solid #F60;
color: #999;
text-align: center;
}

#nav_container{
position: absolute;
top: 110px;
left: 5px;
width: 200px;
height: 300px;
border: 1px solid #F60;
color: #999;
text-align: center;
}

#content{
position: absolute;
top: 110px;
left: 210px;
width: 400px;
height: 300px;
border: 1px solid #F60;
color: #999;
text-align: center;
}

#news{
position: absolute;
top: 110px;
left: 615px;
width: 140px;
height: 300px;
border: 1px solid #F60;
color: #999;
text-align: center;
}

#footer{
position: absolute;
top: 415px;
left: 5px;
width: 750px;
height: 60px;
border: 1px solid #F60;
color: #999;
text-align: center;
}
HTML: <div id="header">header</div>
<div id="nav_container">nav_container</div>
<div id="content">content</div>
<div id="news">news</div>
<div id="footer">footer</div>

bekijk het resultaat

En dan was er ook nog een nadeel? Toch? Klopt. Het nadeel zit 'm in de flexibiliteit: die is er niet.
Als je, je elementen absoluut positioneert geef je ze in de css een vaste waarde voor de x- en y-coördinaten en daar veranderd helemaal niets meer aan. De gebruikelijke 'beweeglijkheid' van de pagina is verdwenen omdat je de elementen boven de flow van de pagina uitgetild hebt.

Bekijk het resultaat van de volgende html gode maar eens. Aan de css verander ik niets. Ik gebruik de css uit het bovenstaande voorbeeld:

HTML: <div id="header">header</div>
<div id="nav_container">nav_container</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div id="news">news</div>
<div id="footer">footer</div>

bekijk het resultaat

Kijk uit wanneer je ervoor kiest om (onderdelen van) je layout absoluut te positioneren. Het werkt goed in hele specifieke gevallen, wanneer je van te voren de hoeveelheid content precies weet. In de praktijk komt dit niet zoveel voor en zul je van 'position: absolute' niet veel gebruik zult maken.

Je ziet dat de tekst in de box 'content' dwars door de box 'footer' heen loopt. De footer geeft geen krimp en is in geen enkel opzicht flexibel ten opzichte van de boxen er omheen.
Nou valt daar ook wel weer een mouw aan te passen, maar ik vind het resultaat weinig opwekkend.
Je kunt aan de div #content het volgende toevoegen:

CSS: overflow: auto;

Hiermee bereik je het volgende resultaat

Zoals gezegd, ik word er niet enthousiast van en vind het er een beetje amateuristisch uitzien. Wat mij betreft beter van niet dus.
Voor de volledigheid toch nog wat meer informatie over de eigenschap 'overflow'.

naar het begin van de pagina