Elementen laten overlappen en de laagvolgorde bepalen

Samenvatting

Soms wil je elementen bewust laten overlappen — een badge over een productfoto, een titel half over een beeld. En soms overlappen ze per ongeluk: een knop wordt onklikbaar of tekst valt achter een afbeelding. In beide gevallen draait het om twee losse dingen: positie (waar staat een element) en laagvolgorde (wat ligt bovenop). Dit artikel laat zien hoe je ze allebei bewust inzet — in de juiste volgorde — zodat overlap een designkeuze wordt in plaats van een bug.

Wanneer gebruik je dit?

Je wilt een element bewust over een ander heen leggen (badge, label, accent).
Een knop lijkt zichtbaar, maar is niet klikbaar.
Een tekstblok valt achter een achtergrondbeeld.
Op desktop klopt het, maar op mobiel overlapt het.

Hoe werkt dit in Mach3Blocks?

Wat vooraan of achteraan ligt, bepaal je op twee manieren:

1. Laagvolgorde — de snelste manier. Selecteer een element (of item) en gebruik de knoppen Naar voren, Naar achteren, Vooraan en Achteraan. Daarmee schuif je het laag voor laag (of in één keer helemaal) voor of achter de andere elementen. Voor de meeste overlapkwesties is dit al genoeg.

2. Positie en Diepteniveau — voor preciezere controle. In het rechter paneel onder Opmaak → Positie stel je in:

Positie: Statisch (standaard, volgt gewoon de flow), Relatief (verschuifbaar t.o.v. de eigen plek) of Absoluut (los van de flow, met boven/onder/links/rechts boven op andere elementen te plaatsen).
Diepteniveau: de exacte laag — hoe hoger, hoe meer naar voren. Dit is het fijnmazige broertje van de Naar voren/achteren-knoppen.

--alert variant:warning title:"Kernregel"--
Los eerst de structuur en positie op, en pas daarna de laagvolgorde. Alleen het diepteniveau ophogen zonder de oorzaak te checken, levert meestal nieuwe overlapfouten op andere schermformaten op.
--/alert--

Belangrijk om te snappen:

Absoluut haalt een element uit de normale flow — dát gebruik je om bewust te overlappen, maar het reserveert dan geen ruimte meer, dus andere elementen "weten" niet dat het er is.
Staat de bovenliggende container op Overloop: Verborgen, dan wordt een overlappend element buiten de rand afgeknipt. Controleer dat als een overlap onverwacht verdwijnt.
Laagvolgorde werkt binnen dezelfde structuur. Zorg dus eerst dat twee elementen logisch genest zijn (blok → container → rij → kolom → element), en bepaal daarna pas de laag.

Waar klik je precies?

Open de pagina in de editor en selecteer het element dat verkeerd bovenop ligt.
Gebruik de knoppenbalk (of rechtermuisknop) en kies Naar achteren / Achteraan — of selecteer het element dat juist vóór moet en kies Naar voren / Vooraan.
Werkt dat niet? Ga naar Opmaak → Positie en vergelijk bij beide elementen de Positie (staat er iets onbedoeld op Absoluut?) en het Diepteniveau.
Valt het element helemaal weg? Controleer of de bovenliggende container op Overloop: Verborgen staat.
Herhaal de controle per schermformaat (Tablet, Telefoon staand) — opmaak kan per breakpoint verschillen.
Test in preview of knoppen en links écht klikbaar zijn.

Supportflow: symptoom → oorzaak → oplossing

"Knop is zichtbaar maar niet klikbaar"

Een (vaak onzichtbaar of half-transparant) element ligt eroverheen en vangt de kliks op.

Selecteer de knop en controleer of die in de juiste kolom/rij staat.
Selecteer het overlappende element en zet het met Naar achteren onder de knop, of haal het uit de klikzone.
Staat het overlappende element op Absoluut? Dan bepaalt het Diepteniveau wie de klik opvangt — zet de knop hoger of het decor lager.
Test door echt te klikken in preview.

"Tekst valt achter de afbeelding op mobiel"

Op mobiel stapelen kolommen, waardoor de volgorde/positie anders kan uitpakken dan op desktop.

Schakel naar Telefoon staand.
Controleer de positie van het tekst- en het afbeeldingselement apart; herstel eerst de logische stapeling, pas daarna de laag.
Controleer ook Tablet, om een breuk op het tussenformaat te voorkomen.

--alert variant:info title:"Praktische tip"--
Gebruik overlap alleen bewust, als designaccent — niet als noodoplossing voor een spacing- of structuurprobleem. Klopt de onderliggende structuur, dan heb je laagvolgorde bijna nooit nodig.
--/alert--

Praktijkvoorbeelden

Voorbeeld 1 — Badge over een productfoto

Situatie: de "Nieuw"-badge staat mooi op desktop, maar bedekt op mobiel de bestel-knop.
Ingreep: badge op mobiel iets verplaatst en met Naar achteren onder de knop gezet; klikbaarheid van de knop in preview getest.
Resultaat: de badge blijft een zichtbaar accent, de knop blijft volledig bruikbaar.

Voorbeeld 2 — Decoratieve vorm achter een tekstblok

Situatie: een decoratieve achtergrondvorm schuift op tablet over de bodytekst heen.
Ingreep: de vorm in een eigen container gezet, met Achteraan onder de tekst gelegd, en per schermformaat gecontroleerd.
Resultaat: de vorm ondersteunt het design zonder de leesbaarheid te schaden.

Veelgemaakte fouten

Alles oplossen door het diepteniveau op te hogen. Controleer eerst positie en structuur — anders verplaatst het probleem zich naar een ander breakpoint.
Alleen op desktop testen. Overlap ontstaat juist vaak pas bij het stapelen op mobiel; test op desktop, tablet én telefoon.
Decoratieve lagen over interactieve onderdelen. Houd klikzones van knoppen en links vrij en test ze echt in preview.
Overlap gebruiken om een spacingfout te verbergen. Herstel dan eerst de ruimte en het grid.

Als het dan nog niet klopt, check je...

of een bovenliggende container Overloop: Verborgen afdwingt (dan wordt de overlap afgeknipt);
of een schermformaat nog een oude positie of diepteniveau vasthoudt;
of het eigenlijk om kolomvolgorde gaat in plaats van laagvolgorde.