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>
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>
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>
Je ziet dat de tekst in de box 'content' dwars door de box 'footer' heen loopt. De footer geeft geen pixel
mee 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 echt 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.
Kijk dus goed uit wanneer je ervoor kiest om je layout op deze manier op te zetten. Het werkt eigenlijk alleen goed bij kleine statische websites waarbij je van te voren de hoeveelheid content precies weet. Je kunt dan bij de bouw van de website de afmetingen en x- en y-coördinaten precies uitmikken.
In de praktijk zal blijken dat je van 'position: absolute' niet zoveel gebruik zult maken, vanwege het hier beschreven nadeel.