Positionering elementen

Nu we weten hoe in HTML het box model werkt, laten we zien hoe bepaald wordt waar een element (box) op een webpagina komt te staan. In CSS kunnen aan elementen met de eigenschap “position” waarden worden toegekend waarmee de plaats van een element (box) op een webpagina kan worden vastgelegd. We noemen dat het positioneren van elementen. De eigenschap position kan 4 waarden hebben:

  1. static
    Standaard worden elementen gepositioneerd met deze waarde. Een element (box) komt op de plaats waar het volgens de normale opbouw van de pagina zou moeten staan.
    In CSS: position: static;
  2. relative
    Relatieve positionering houdt in dat een element (box) verplaatst wordt ten opzichte van de positie die het normaal zou hebben. De verplaatsing is niet van invloed op omringende elementen (boxen). Het is dus mogelijk dat onderdelen elkaar gaan overlappen en/of afdekken. Om de positie van een element aan te geven worden de eigenschappen top, right, bottom en left gebruikt.
    In CSS: position: relative;
  3. absolute
    Bij een absolute positionering van een element (box) wordt het element op een aangegeven plaats binnen het omliggende element geplaatst. De plaats van het element wordt bepaald door een verticaal en een horizontaal punt. Voor het aangeven van de verticale plaats worden de eigenschappen top en/of bottom gebruikt. Voor het bepalen van de horizontale plaats gebruiken we left en/of right. Met top left en top right bepalen we de linker- en rechterbovenhoek van het element. Bottom left en bottom right bepalen de linker- en rechteronderhoek van het element. De coördinaten die worden vastgesteld, bepalen de plaats van het element. Daarbij wordt géén rekening gehouden met wat er op de aangegeven plek staat. Er kan dus ook hier sprake zijn van overlappingen.
    In CSS: position: absolute;
  4. fixed
    Fixed wil zeggen dat het element (box) gefixeerd wordt binnen het zichtbare venster. Het blijft altijd op de aangegeven plek staan. Ook al scroll je in een browser met een schuifbalk naar beneden. De plaats van het element kan op dezelfde manier worden aangegeven als bij de absolute positionering van een element.
    In CSS: position: fixed;

Bekijk het volgende filmpje daarna kan je eventueel de tekst nog lezen.

Positioneren van elementen

Aan de hand van een paar voorbeelden zullen we proberen te verduidelijken wat het effect is van deze 4 verschillende waarden. We gebruiken daarvoor een webpagina met de afbeelding en beschrijving van een muziekinstrument.
Namelijk een piano. Voor de beschrijving van de piano hebben we de tekst van een wikipediapagina gebruikt.

Piano

In de broncode van onze webpagina staat in de body van het HTML-document:

  • een element H2.
  • een afbeelding van de toetsen van een piano. We hebben van de afbeelding een class met de naam piano gemaakt.
  • drie keer een alinea’s met teksten over de piano.

In het HTML-document wordt verwezen naar een apart CSS-bestand. We hebben dat bestand voor het gemak even piano.css genoemd.


Hieronder zie je de broncode van piano.html:

Broncode Piano

<!DOCTYPE html>
<html lang="nl">
     <head>
           <title>De piano</title>
           <meta charset="utf-8">
           <link rel="stylesheet" href="css/piano.css">
     </head>
     <body>
     <h2>
           De Piano
     </h2>
           <img class="piano" src="afb/piano.png" alt="afbeelding van een piano">
     <p>
           De piano is een slag-, toets- en snaarinstrument uit de ....... pianomuziek heeft gecomponeerd
     </p>
     <p>
           Pianoforte betekent ....... piano bedoelt.
     </p>
     <p>
           De huiskamerpiano ....... een vleugelpiano.
     </p>
     </body>
</html>


We gaan het element img class=”piano” een relatieve positie geven. In piano.css noteren we:

Relatieve positie

De afbeelding van de pianotoetsen is nu verplaats en staat deels over de tekst van de eerste alinea. De afbeelding is 60px naar beneden en 20px naar links verschoven. Bedenk dat de verplaatsing naar beneden ten opzichte van het element h2 is. In de broncode van het HTML-document wordt eerst het h2-element en daarna de afbeelding opgenomen. Zouden we de afbeelding als eerste in de body opnemen en daarna het h2-element krijgen we de afbeelding op een andere plek te zien. De afbeelding van de pianotoetsen staat nu voor een groot deel over het element h2 heen.


We kunnen de afbeelding ook een absolute positie geven.
We passen daarvoor de CSS-code aan.
Links staat de aangepaste code, rechts zien we het resultaat:

Absolute positie

De pianotoetsen staan nu over delen van de eerste en tweede alinea. Het omliggende element waar bij het bepalen van de plaats van de afbeelding naar gekeken wordt, is in dit voorbeeld het element body. De afbeelding krijgt nu als linkerbovenhoek de waarde 20 pixels naar links en 60 pixels naar beneden mee.


We passen nogmaals de CSS-code van de class piano aan. We gaan nu voor het element img class=”piano” een border en marge instellen. De afbeelding zakt door de nieuwe instellingen nog verder naar beneden en verschuift nog meer naar rechts.

Border marge

De eigenschappen en waarden van het box model bepalen dus mede op welke plek de inhoud van een element wordt afgebeeld.

 

Float
Naast het gebruik van de eigenschap position bestaat er ook een eigenschap float. Je kunt float aan ieder element toekennen. Je maakt er dan een zogenaamd zwevend element van. De waardes zijn none, left of right. Als je float toekent aan een element, dan wordt de top gelijk gezet met de top van de box waarin het element staat. Verder wordt het element zo ver mogelijk naar links of naar rechts geplaatst als mogelijk is, afhankelijk van wat je aangeeft.

Er zijn aandachtspunten waar je rekening mee moet houden bij het gebruik van elementen die de float-eigenschap hebben. Je moet een breedte (width) meegeven en het is mogelijk dat elementen elkaar gaan overlappen. Om dit tegen te gaan kun je gebruik maken van de eigenschap clear met de waarden none, left, right of both.