---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/layout/positioned-layers'
title: 'Adding a Positioned Layers Container | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2023-11-06T06:17:59+00:00'
updated: '2026-10-23T14:31:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Place text, images and buttons freely on a canvas and let them overlap, such as a headline over a photo'
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-23T14:31:17+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Adding a Positioned Layers Container'
      description: 'Place text, images and buttons freely on a canvas and let them overlap, such as a headline over a photo'
      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-23T14:31:17+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/hc/documentation/learn-dxpr-builder/layout/positioned-layers'
      articleSection: Layout
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/layout/positioned-layers'
      description: 'Place text, images and buttons freely on a canvas and let them overlap, such as a headline over a photo'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: en
---
[Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Layout](/hc/documentation/learn-dxpr-builder/layout/overview) # Adding a Positioned Layers Container.

Place text, images and buttons freely on a canvas and let them overlap, such as a headline over a photo

 Learn DXPR BuilderBuild pagesAdd contentLayout

   ## In this guide

 Related guides

- [Sections](/hc/documentation/learn-dxpr-builder/layout/sections)
- [Nesting](/hc/documentation/learn-dxpr-builder/layout/nesting)
- [Animation tab](/hc/documentation/learn-dxpr-builder/design/animation-tab)

Use Positioned layers when you want elements to overlap or sit at an exact spot, which rows and columns cannot do. You get a canvas on which you drag each element where you want it, such as a headline over a photo. The example layers a white open day headline over an image. For ordinary side-by-side content, [rows and columns](/hc/documentation/learn-dxpr-builder/layout/rows-and-columns) are easier to keep tidy on phones.

  ## Add a positioned layers container

1. Hover the column and click **+** in its control bar, or the **+** in the middle of an empty column, to open the element picker.
2. In the **Layout** tab, click **Positioned layers**.
3. Its settings open first. Set **Height** so your tallest layer fits, then click **Save**. An empty canvas appears.
4. Hover the canvas and click **+** in its control bar to add an element, such as **Text** or an **Image**. Each element you add becomes a layer you can position.

## What you see

The canvas keeps the height you set, and each layer sits where you placed it, on top of or under the others. Visitors see the composition as it looks in the editor. Positions are stored as a share of the canvas, so a layer keeps its place when the canvas gets narrower. Text keeps its size unless you switch on **Responsive**.

## Set up your positioned layers

Open the settings from **More** > **Settings** in the **Positioned layers** control bar.

| Setting | What it does | Default |
|---|---|---|
| **Width** | Canvas width, such as 100% or 600px | 100% |
| **Height** | Canvas height in pixels | 500 |
| **Responsive** | Scales the canvas height and the text with the canvas width, so the composition keeps its proportions on small screens | Off |

## Position layers

- **Select**: click a layer. Handles appear on its corners and edges.
- **Move**: drag the layer by its name in its control bar, such as **Text** or **Image**. Layers stay inside the canvas.
- **Resize**: drag a handle of the selected layer.
- **Add at a spot**: double-click an empty part of the canvas. The element picker opens, and the new element lands where you clicked.

Each layer's **More** menu has four extra items. **100% width** and **100% height** stretch the layer across the canvas. **Bring forward** and **Send backward** move it above or below the other layers.

## If you don't see it

- **A layer does not move when you drag it.** Layers only move by the handle with their name in the control bar. Hover the layer and drag that handle.
- **A layer hides behind another.** It sits lower in the stack. Open the layer's **More** menu and choose **Bring forward**.
- **Layers overlap or spill over on phones.** **Responsive** is off, so the canvas height and text keep their size. Switch on **Responsive** in the **Positioned layers** settings.
- **Positioned layers is missing from the picker inside a canvas.** A canvas cannot hold another canvas. Add the new **Positioned layers** element to a column instead.
- **Positioned layers is missing from the picker everywhere.** Your DXPR Builder user profile leaves it out. An administrator ticks **Layers** under **Elements** in your profile at `/admin/dxpr_studio/dxpr_builder/profile`.

## What's next?

- [Sections](/hc/documentation/learn-dxpr-builder/layout/sections): give the area around the canvas a background colour or image.
- [Nesting](/hc/documentation/learn-dxpr-builder/layout/nesting): combine layers with rows and columns in more complex layouts.
- [Animation tab](/hc/documentation/learn-dxpr-builder/design/animation-tab): let each layer appear with its own entrance effect.