⏱️ Leestijd: ca. 6 min.

Positionering in CSS: Controle over de Lay-out

Tot nu toe heb je geleerd hoe elementen op een pagina op een natuurlijke manier onder enast elkaar stromen volgens de document flow. Denk aan alinea's die netjes onder elkaar staan of knoppen die naast elkaar verschijnen.

Maar wat als je een sluitknop exact in de rechterbovenhoek van een afbeelding wilt plaatsen? Een navigatiebalk die aan de bovenkant van het scherm blijft kleven als je scrollt? Of een 'Scroll naar boven'-knop die altijd rechtsonder in beeld blijft staan?

Daarvoor gebruiken we de position-eigenschap in CSS. In deze les ontdek je de vijf positioneringswaarden (static, relative, absolute, fixed en sticky) en hoe je met z-index de stapelvolgorde van elementen beheert.

1. Welke offset-eigenschappen gebruiken we?

Zodra je een element een andere position geeft dan de standaardwaarde, krijg je toegang tot vier specifieke richtings-eigenschappen (ook wel offsets genoemd):

2. De 5 Positioneringswaarden

A. position: static (Standaard)

Dit is de standaardwaarde voor vrijwel elk HTML-element. Het element volgt de normale documentstroom van de pagina.

.normaal-blok {
    position: static; /* Standaardgedrag: volgt de normale volgorde */
}

B. position: relative (Relatief ten opzichte van zichzelf)

Bij position: relative blijft het element in de normale documentstroom staan, maar kun je het verschuiven ten opzichte van zijn oorspronkelijke plek.

Het element verschuift visueel, maar de oorspronkelijke plek blijft gereserveerd in de lay-out. Andere elementen schuiven dus niet op.

.verschoven-doos {
    position: relative;
    top: 20px;   /* Duwt de doos 20px naar BENEDEN vanaf de originele plek */
    left: 30px;  /* Duwt de doos 30px naar RECHTS vanaf de originele plek */
}
💡 Belangrijkste functie van relative:
Hoewel je relative kunt gebruiken om elementen een klein beetje te verschuiven, gebruiken we het in de praktijk vooral als ankerpunt (ouder/parent) voor elementen met position: absolute!

C. position: absolute (Losgekoppeld van de stroom)

Een element met position: absolute wordt volledig losgekoppeld uit de normale documentstroom. Het neemt geen ruimte meer in op de pagina; andere elementen gedragen zich alsof het absolute element niet bestaat.

Het element positioneert zichzelf ten opzichte van de dichtstbijzijnde ouder (parent) die gepositioneerd is (dus een ouder die relative, absolute of fixed heeft). Is er geen gepositioneerde ouder? Dan positioneert het zich ten opzichte van het hele scherm (<body>).

/* De ouder dient als anker */
.kaart {
    position: relative; /* Dit is de 'container' */
    width: 300px;
    height: 200px;
}

/* Het kind wordt exact gepositioneerd binnen de ouder */
.badge {
    position: absolute;
    top: 10px;
    right: 10px; /* Plakt in de rechterbovenhoek van de .kaart */
    background-color: #ef4444;
    color: white;
    padding: 4px 8px;
}

D. position: fixed (Vastgeketend aan het scherm)

Een element met position: fixed wordt eveneens losgekoppeld uit de normale stroom, maar positioneert zich altijd ten opzichte van het venster van de browser (viewport).

Het maakt niet uit hoeveel de bezoeker scrolt: het element blijft exact op dezelfde plek in beeld staan.

.help-knop {
    position: fixed;
    bottom: 20px;
    right: 20px; /* Blijft altijd rechtsonder in het scherm staan */
    background-color: #2563eb;
    color: white;
    padding: 15px 20px;
    border-radius: 50px;
}
Toepassingen: Vaste navigatiebalken, "naar boven"-knoppen, chat-widgets en cookie-banners.

E. position: sticky (De slimme hybride)

position: sticky is een combinatie van relative en fixed. Het element gedraagt zich als relative totdat je tijdens het scrollen een bepaald punt bereikt (bijv. top: 0;). Op dat moment verandert het in fixed en blijft het vastplakken aan het scherm.

Scroll je weer terug omhoog? Dan laat het element los en keert het terug naar zijn oorspronkelijke plek.

.sticky-header {
    position: sticky;
    top: 0; /* Plakt vast aan de bovenkant van het scherm zodra je er voorbij scrolt */
    background-color: #ffffff;
    z-index: 100;
}
Toepassingen: Sticky navigatiemenu's, tabelkoppen of alfabetische tussenkopjes in een lijst.

3. Stapelvolgorde beheren met z-index

Wanneer je elementen gaat positioneren, gebeurt het vaak dat ze over elkaar heen komen te liggen. Maar welk element ligt er bovenop?

Standaard ligt het element dat later in de HTML-code staat bovenop. Met de eigenschap z-index kun je deze stapelvolgorde (de 3D 'Z-as') zelf aanpassen.

.achterste-kaart {
    position: absolute;
    z-index: 1; /* Lager getal = achteraan */
}

.voorste-kaart {
    position: absolute;
    z-index: 10; /* Hooger getal = vooraan */
}

       Z-AS (Diepte)
         
    [ z-index: 10 ]  --> Ligt bovenaan (Zichtbaar)
   [  z-index: 1   ]  --> Ligt erachter
  [   z-index: 0    ]  --> Standaard
⚠️ Golden Rule for z-index:
z-index werkt ALLEEN op elementen die een ingestelde position hebben (relative, absolute, fixed of sticky). Op een standaard position: static element doet z-index helemaal niets!

4. Overzichtstabel Positionering

WaardeUit documentstroom?Positioneert ten opzichte van...Veelgebruikte toepassing
staticNeeNormale stroomStandaard elementen.
relativeNeeOorspronkelijke plekAnkerpunt maken voor absolute kinderen.
absoluteJaDichtstbijzijnde gepositioneerde ouderBadges, sluitknoppen, dropdowns.
fixedJaBrowservenster (viewport)Chatknoppen, 'sticky' pop-ups, vaste navs.
stickyNee (tot scroll)Scrollpositie in de containerNavigatiebalken die moeten blijven plakken.

5. Compleet Praktijkvoorbeeld

In onderstaand voorbeeld combineren we een sticky navigatiebalk, een afbeeldingskaart met een absolute badge, en een fixed contactknop.

HTML (index.html)

<header class="navbar">
    <h1>Studio Viso</h1>
</header>

<main class="content">
    <article class="kaart">
        <span class="badge">Nieuw</span>
        <img src="project.jpg" alt="Project weergave">
        <h2>Grafisch Project</h2>
        <p>Een unieke combinatie van lay-out en CSS-techniek.</p>
    </article>
</main>

<a href="#contact" class="floating-btn">Contact</a>

CSS (style.css)

/* Algemene instellingen */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    height: 1500px; /* Zorgt dat de pagina kan scrollen */
    background-color: #f8fafc;
}

/* 1. STICKY NAVIGATIEBAR */
.navbar {
    position: sticky;
    top: 0;
    background-color: #0f172a;
    color: #ffffff;
    padding: 15px 30px;
    z-index: 100; /* Zorgt dat de navbar over alle content heen blijft scrollen */
}

/* 2. CARD MET RELATIVE & ABSOLUTE */
.content {
    padding: 40px;
}

.kaart {
    position: relative; /* ANKERPUNT voor de badge! */
    width: 320px;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #e2e8f0;
}

.badge {
    position: absolute; /* Plakt in de hoek van .kaart */
    top: -10px;
    right: -10px;
    background-color: #2563eb;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 6px 12px;
    border-radius: 20px;
    z-index: 10;
}

/* 3. FIXED FLOATING BUTTON */
.floating-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #16a34a;
    color: #ffffff;
    padding: 14px 24px;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    z-index: 99;
}

Samenvatting