---
url: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/lay-out/gepositioneerde-lagen'
title: 'Een container met gepositioneerde lagen toevoegen | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2023-11-06T06:17:59+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Gebruik Gepositioneerde lagen wanneer elementen moeten overlappen of op een exacte plek moeten staan, wat met rijen en kolommen niet kan. Je krijgt een canvas waarop je elk element sleept waar je het wilt hebben, zoals een kop over een foto. Het voorbeeld legt een witte kop over een opendag over een afbeelding. Voor gewone inhoud naast elkaar zijn rijen en kolommen gemakkelijker netjes te houden op telefoons.'
tags:
  - Layout
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Een container met gepositioneerde lagen toevoegen'
      description: 'Gebruik Gepositioneerde lagen wanneer elementen moeten overlappen of op een exacte plek moeten staan, wat met rijen en kolommen niet kan. Je krijgt een canvas waarop je elk element sleept waar je het wilt hebben, zoals een kop over een foto. Het voorbeeld legt een witte kop over een opendag over een afbeelding. Voor gewone inhoud naast elkaar zijn rijen en kolommen gemakkelijker netjes te houden op telefoons.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2023-11-06T06:17:59+0000'
      dateModified: '2026-10-24T17:19:22+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/lay-out/gepositioneerde-lagen'
      articleSection: Lay-out
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/lay-out/gepositioneerde-lagen'
      description: 'Gebruik Gepositioneerde lagen wanneer elementen moeten overlappen of op een exacte plek moeten staan, wat met rijen en kolommen niet kan. Je krijgt een canvas waarop je elk element sleept waar je het wilt hebben, zoals een kop over een foto. Het voorbeeld legt een witte kop over een opendag over een afbeelding. Voor gewone inhoud naast elkaar zijn rijen en kolommen gemakkelijker netjes te houden op telefoons.'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/nl'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: nl
---
[Helpcentrum](/nl/hc)/[Documentatie](/nl/hc/documentatie) /[DXPR Builder leren](/nl/hc/documentation/learn-dxpr-builder) /[Pagina’s bouwen](/nl/hc/documentation/learn-dxpr-builder/build) /[Content toevoegen](/nl/hc/documentation/learn-dxpr-builder/elements) /[Lay-out](/nl/hc/documentation/learn-dxpr-builder/layout/overview) # Een container met gepositioneerde lagen toevoegen.

 DXPR Builder lerenPagina’s bouwenContent toevoegenLay-out

   ## In deze gids

 Gerelateerde gidsen

- [Een sectie toevoegen](/nl/hc/documentatie/dxpr-builder-leren/lay-out/secties)
- [Een geneste lay-out toevoegen](/nl/hc/documentatie/dxpr-builder-leren/lay-out/nesten)
- [Animeer elementen bij scrollen, hover of klik](/nl/hc/documentatie/dxpr-builder-leren/ontwerp/animatie-tabblad)

Gebruik Gepositioneerde lagen wanneer elementen moeten overlappen of op een exacte plek moeten staan, wat met rijen en kolommen niet kan. Je krijgt een canvas waarop je elk element sleept waar je het wilt hebben, zoals een kop over een foto. Het voorbeeld legt een witte kop over een opendag over een afbeelding. Voor gewone inhoud naast elkaar zijn [rijen en kolommen](/nl/hc/documentation/learn-dxpr-builder/layout/rows-and-columns) gemakkelijker netjes te houden op telefoons.

  ## Een container met gepositioneerde lagen toevoegen

1. Beweeg over de kolom en klik op **+** in de besturingsbalk, of op de **+** in het midden van een lege kolom, om de elementenkiezer te openen.
2. Klik op het tabblad **Lay-out** op **Gepositioneerde lagen**.
3. Eerst openen de instellingen. Stel **Hoogte** zo in dat je hoogste laag past en klik daarna op **Opslaan**. Er verschijnt een leeg canvas.
4. Beweeg over het canvas en klik op **+** in de besturingsbalk om een element toe te voegen, zoals **Tekst** of een **Afbeelding**. Elk element dat je toevoegt wordt een laag die je kunt positioneren.

## Wat je ziet

Het canvas behoudt de hoogte die je instelde, en elke laag staat waar je hem plaatste, boven of onder de andere. Bezoekers zien de compositie zoals hij er in de editor uitziet. Posities worden opgeslagen als aandeel van het canvas, zodat een laag op zijn plek blijft wanneer het canvas smaller wordt. Tekst behoudt zijn grootte tenzij je **Responsief** aanzet.

## Je gepositioneerde lagen instellen

Open de instellingen via **More** > **Settings** in de besturingsbalk van **Gepositioneerde lagen**.

| Instelling | Wat het doet | Standaard |
|---|---|---|
| **Breedte** | Canvasbreedte, zoals 100% of 600px | 100% |
| **Hoogte** | Canvashoogte in pixels | 500 |
| **Responsief** | Schaalt de canvashoogte en de tekst mee met de canvasbreedte, zodat de compositie op kleine schermen in verhouding blijft | Uit |

## Lagen positioneren

- **Selecteren**: klik op een laag. Er verschijnen grepen op de hoeken en randen.
- **Verplaatsen**: sleep de laag aan de naam in de besturingsbalk, zoals **Tekst** of **Afbeelding**. Lagen blijven binnen het canvas.
- **Formaat wijzigen**: sleep aan een greep van de geselecteerde laag.
- **Toevoegen op een plek**: dubbelklik op een leeg deel van het canvas. De elementenkiezer opent en het nieuwe element belandt waar je klikte.

Het menu **More** van elke laag heeft vier extra items. **100% breedte** en **100% hoogte** rekken de laag uit over het canvas. **Naar voren halen** en **Naar achteren sturen** verplaatsen hem boven of onder de andere lagen.

## Als je het niet ziet

- **Een laag beweegt niet wanneer je hem sleept.** Lagen bewegen alleen via de greep met hun naam in de besturingsbalk. Beweeg over de laag en sleep aan die greep.
- **Een laag verstopt zich achter een andere.** Hij staat lager in de stapel. Open het menu **More** van de laag en kies **Naar voren halen**.
- **Lagen overlappen of steken uit op telefoons.** **Responsief** staat uit, zodat de canvashoogte en tekst hun grootte behouden. Zet **Responsief** aan in de instellingen van **Gepositioneerde lagen**.
- **Gepositioneerde lagen ontbreekt in de kiezer in een canvas.** Een canvas kan geen ander canvas bevatten. Voeg het nieuwe element **Gepositioneerde lagen** toe aan een kolom.
- **Gepositioneerde lagen ontbreekt overal in de kiezer.** Je DXPR Builder-gebruikersprofiel sluit het uit. Een beheerder vinkt **Lagen** aan onder **Elementen** in je profiel op `/admin/dxpr_studio/dxpr_builder/profile`.

## Wat nu?

- [Secties](/nl/hc/documentation/learn-dxpr-builder/layout/sections): geef het gebied rond het canvas een achtergrondkleur of -afbeelding.
- [Nesten](/nl/hc/documentatie/dxpr-builder-leren/lay-out/nesten): combineer lagen met rijen en kolommen in complexere lay-outs.
- [Animatietabblad](/nl/hc/documentation/learn-dxpr-builder/design/animation-tab): laat elke laag met een eigen binnenkomsteffect verschijnen.