Je kunt de manier van positioneren voor een gebied of een element bepalen. Hiervoor wordt de eigenschap positie gebruikt. Deze eigenschap geeft aan hoe een element uiteindelijk moet worden gepositioneerd. In totaal zijn er vier verschillende positioneringsvarianten om uit te kiezen.
• static - er wordt geen specifieke positionering toegepast en er vindt een normale tekststroom plaats.
• relatief - er vindt een relatieve positionering plaats, die zich oriënteert op de normale positie of beginpositie van het element.
• absoluut - er vindt een absolute positionering plaats via de eigenschappen top, bottom, left en right. Absoluut gepositioneerde elementen bevinden zich buiten de normale tekststroom. De absolute positie wordt berekend ten opzichte van de randen van het ouderlijke element (maar alleen als dit element de eigenschap positie: static niet heeft).
• vast - het element wordt absoluut gepositioneerd. Bij het scrollen blijft het element op zijn plek.
De eerste twee varianten maken een variabele positionering mogelijk. Hier worden elementen ten opzichte van elkaar gepositioneerd. De volgende twee voorbeelden tonen hoe deze vorm van positionering eruit zou kunnen zien:
• Element 2 wordt 30 pixels verschoven ten opzichte van Element 1 geplaatst.
• Element 2 wordt achter Element 1 geplaatst.
Met fixed en static is het anders gesteld. Hiermee kunnen elementen op zeer specifieke plaatsen worden geplaatst. De positioneringsinstructies verwijzen naar het bovenliggende ouderlijke element of het browservenster. Een voorbeeld:
• Element 1 wordt exact 30 pixels vanaf de rechter- en 20 pixels vanaf de bovenkant van het browservenster geplaatst.
Hieronder worden de verschillende positioneringsopties nogmaals gedetailleerd uiteengezet. Echter, eerst een opmerking: Bij het positioneren van elementen speelt het zogenaamde floaten een belangrijke rol. In de volgende tutorial zal ik uitgebreid ingaan op dit belangrijke CSS-principe. In principe gaat het bij dit floaten erom hoe de elementen van de website in het document stromen. Hierbij worden de elementen zoveel mogelijk in de respectievelijke richting gedrukt. Door de manier van positioneren kan de stroom van elementen expliciet worden bepaald.
De relatieve positionering
Door het gebruik van relatieve positionering via positie: relatief gebeuren er twee dingen:
• De box wordt uit zijn normale stroom verplaatst.
• De oorspronkelijke plaats van het element wordt gereserveerd.
Vanwege het reserveren van de oorspronkelijke plaats gedragen de andere elementen zich alsof het element nog steeds op zijn plek aanwezig is.
Een voorbeeld:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div {
breedte: 20%;
achtergrondkleur: wit;
opvulling: 10px;
rand: 1px solide zwart;
marge: 5px;
}
#box {
positie: relatief;
boven: 25px;
rechts: 25px;
achtergrondkleur:#33CCFF;
}
</style>
</head>
<body>
<div id="box">Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</body>
</html>Hier werden drie boxen gedefinieerd.
De beide boxen 2 en 3 hebben geen positioneringsinstructie gekregen. Ze volgen daarom de normale documentstroom. Box 1 is daarentegen relatief gepositioneerd. Hierdoor worden boxen 2 en 3 volledig onaangetast door Box 1. De ruimte van Box 1 wordt dus niet opgeëist door deze boxen. Door de instructies boven, bodem, links en rechts vindt de positionering van de boxen plaats. Bij relatieve positionering wordt uitgegaan van de oorspronkelijke positie in de documentstroom (Flow).
• boven: 25px - de box wordt 25 pixels naar beneden verschoven. Boven de normale positie van de box worden dus 25 pixels ingevoegd.
• rechts: 25px - de box wordt 25 pixels naar links verschoven. Rechts van de normale positie van de box worden dus 25 pixels ingevoegd.
De pixelwaarden moeten worden gezien ten opzichte van de oorspronkelijke positie. De instructies bepalen waar de waarde wordt ingevoegd, dus boven en rechts. Dit aspect is cruciaal. De instructies bepalen dus niet waar de box naartoe wordt verschoven.
De absolute positionering
We gaan verder met de absolute positionering. Deze positioneringsmethode haalt het element volledig uit de stroom. De andere elementen op de pagina gedragen zich alsof het element helemaal niet aanwezig is.
Een voorbeeld:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div {
breedte: 20%;
achtergrondkleur: wit;
opvulling: 10px;
rand: 1px solide zwart;
marge: 5px;
}
#box {
positie: absoluut;
boven: 25px;
rechts: 25px;
achtergrondkleur:#33CCFF;
}
</style>
</head>
<body>
<div id="box">Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</body>
</html>Ook hier zijn drie boxen gedefinieerd. Box 1 is absoluut gepositioneerd.
In tegenstelling tot bij relatieve positionering is er geen ruimte gereserveerd voor Box 1. Boxen 2 en 3 schuiven omhoog.
De positioneringsinstructies boven, rechts, bodem of links oriënteren zich nu niet meer op de oorspronkelijke positie van de box in de stroom. De instructies verwijzen eerder naar het eerstvolgende omsluitende element dat is gepositioneerd met relatief, absoluut of vast. Indien er geen omsluitend element is, gebeurt de positionering relatief aan het bovenste element van de documentboom, dus aan html.
Een positionering met fixed
Met position: fixed kunnen elementen worden vastgezet. Hier is een voorbeeld:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p { margin-left: 25%; }
#fixiert {
position: fixed;
top: 20px;
left: 20px;
background-color:#33FFCC;
width: 20%;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="fixiert">Splitter-Effekt Teil 1</div>
<p>Slechts voor een korte tijd is de nieuwste tutorial of video-training in de online weergave of de inhoud uit de downloadcategorie puntenvrij. Lees hier meer ...</p>
</body>
</html>Het vaste vak scrollt niet mee, maar blijft altijd op de positie staan die ervoor is toegewezen.
Voor vaste vakken is het omliggende element altijd het browser-venster.
Houd er rekening mee dat er met name in verband met het vastzetten van elementen in oudere browsers aanzienlijke problemen zijn. Zo doet bijvoorbeeld IE6 hier niet wat het eigenlijk zou moeten doen. Wie zijn websites ook wil / moet optimaliseren voor deze browser, heeft nu twee mogelijkheden:
• Afzien van vaste vakken.
• Hacks gebruiken voor IE.
Als je een hack wilt gebruiken, raad ik je aan de pagina http://thestyleworks.de/tut-art/iewinfixed.shtml te bezoeken. Daar wordt aan de hand van een klein JavaScript getoond hoe je vaste vakken ook voor deze browser kunt laten werken.
