CSS - Positioneren van een element


Met behulp van CSS kun je bepaalde elementen zoals een div of een tabel positioneren op je pagina. Zo bepaal je dat een div bijvoorbeeld 50px van de bovenkant van het venster en 20px vanaf de linkerkant van het venster moet komen te staan. Het positioneren van een element doe je met de eigenschap 'position' waarvoor verschillende waardes beschikbaar zijn. Daarnaast is er de veelgebruikte mogelijkheid om elementen te laten zweven (float).

Absolute

Als eerste Absolute. Je krijgt in je CSS code dan position:absolute;. Met behulp van Absolute bepaal je dat een element altijd op een vaste plaatst moet worden neergezet bekeken vanaf de zijkanten van de het venster of een omliggend element. In het onderstaande voorbeeld komt de div altijd te staan op 150px vanaf de bovenkant en 25px vanaf de linkerkant van het venster. Om een element binnen een ander element absolute te positioneren dient voor het omliggende element 'position:relative' te worden ingesteld.

div.classnaam {
        position:absolute;
        top:150px;
        left:25px;
}


Je begint altijd met position:absolute; waar je vervolgens eronder aangeeft met left, right, top en bottom hoe je het element wilt gaan plaatsen. Je hoeft left, top, right, bottom voor het positioneren niet altijd allemaal te definieren net als in het voorbeeld hierboven.

Relative

Als tweede Relative. Je krijgt dan position:relative;. Door gebruik te maken van relative kun je een element relatief plaatsen op basis van de normale positie van het element. Met relative wordt altijd relatief gemeten vanaf de randen waarin een element zich bevind. Plaats je een div in een tabelcel dan worden de waardes die je aangeeft bekeken vanaf de randen van de cel van de tabel en niet op basis van het venster zoals met absolute.

Om dit toe te passen krijg je in de code position:relative; gevolgd door left, right, top of bottom. Op deze manier wordt de div geplaatst 100px vanaf de bovenkant en 20px vanaf de linkerkant. Op deze manier kun je dat ook in procenten aangeven en zo bijvoorbeeld aangeven dat een element altijd 20% vanaf de linkerkant geplaatst moet worden.

div.classnaam {
        position:relative;
        top:100px;
        left:20px;
}


Je kunt overigens ook negatieve waardes gebruiken zoals left:-25px;, top:-25px; op deze manier kun je bijvoorbeeld een div over de rand van een cel heen positioneren.

Fixed

Als laatste de waarde Fixed. Dit sluit eigenlijk aan op het hierboven genoemde absolute. Met fixed geef je aan dat een element altijd moet blijven staan een aangegeven plek op het moment dat de gebruiker naar beneden gaat scrollen op een pagina. Op dat moment zal het betreffende element nog steeds blijven staan op de plek aangegeven in de stylesheet.

div.classnaam {
        position:fixed;
        top:150px;
        left:25px;
}

Float

Dan is er nog de mogelijkheid om een element te laten zweven met het "float" attribuut. Door bijvoorbeeld meerdere elementen, bijvoorbeeld div's achter elkaar te plaatsen en deze een hoogte en breedte te geven kun je deze naast elkaar laten zweven. In de onderstaande code als voorbeeld wordt een div gepositioneerd door deze naar links te laten zweven. Een element kan ook rechts zweven. Als er ruimte over is en een volgend element heeft ook de eigenschap om te floaten zal deze achter de eerste div gaan zweven.

div.classnaam {
        float:left;
        width:150px;
        height:25px;
}


Het float attribuut kan wat dat betreft heel handig zijn, zo ook bijvoorbeeld bij de opbouw van een horizontaal menu met behulp van een ul. Je kunt dan de verschillende menu items (li's) naast elkaar laten zweven door 'float:left' in te stellen voor elk menu item.

Aanvullend op float bestaat er nog de eigenschap 'clear' met als waardes none, left, right, en both. Hiermee kun je aangeven of er elementen naast het element mogen zweven.