---
url: 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/layout/positioned-layers'
title: 'Adicionar um contentor de camadas posicionadas | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T09:01:30+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Use Positioned layers quando quiser sobrepor elementos ou colocá-los num ponto exato, o que as filas e colunas não conseguem. Obtém uma tela onde arrasta cada elemento para o lugar pretendido, como um cabeçalho sobre uma foto. O exemplo coloca um cabeçalho branco de dia aberto sobre uma imagem. Para conteúdos lado a lado comuns, as filas e colunas são mais fáceis de manter arrumadas nos telemóveis.'
tags:
  - Lay-out
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T09:09:48+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Adicionar um contentor de camadas posicionadas'
      description: 'Use Positioned layers quando quiser sobrepor elementos ou colocá-los num ponto exato, o que as filas e colunas não conseguem. Obtém uma tela onde arrasta cada elemento para o lugar pretendido, como um cabeçalho sobre uma foto. O exemplo coloca um cabeçalho branco de dia aberto sobre uma imagem. Para conteúdos lado a lado comuns, as filas e colunas são mais fáceis de manter arrumadas nos telemóveis.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T09:01:30+0000'
      dateModified: '2026-10-24T09:09:48+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/pt-pt/hc/documentation/learn-dxpr-builder/layout/positioned-layers'
      articleSection: Lay-out
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/layout/positioned-layers'
      description: 'Use Positioned layers quando quiser sobrepor elementos ou colocá-los num ponto exato, o que as filas e colunas não conseguem. Obtém uma tela onde arrasta cada elemento para o lugar pretendido, como um cabeçalho sobre uma foto. O exemplo coloca um cabeçalho branco de dia aberto sobre uma imagem. Para conteúdos lado a lado comuns, as filas e colunas são mais fáceis de manter arrumadas nos telemóveis.'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Início
            item: 'https://dxpr.com/pt-pt'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: pt-pt
---
[Help Center](/pt-pt/node/75)/[Documentation](/pt-pt/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) /[Lay-out](/hc/documentation/learn-dxpr-builder/layout/overview) # Adicionar um contentor de camadas posicionadas.

 Learn DXPR BuilderBuild pagesAdd contentLay-out

   ## In this guide

 Related guides

- [Secções](/pt-pt/hc/documentation/learn-dxpr-builder/layout/sections)
- [Adicionar um esquema aninhado](/pt-pt/hc/documentation/learn-dxpr-builder/layout/nesting)
- [Animation tab](/hc/documentation/learn-dxpr-builder/design/animation-tab)

Use Positioned layers quando quiser sobrepor elementos ou colocá-los num ponto exato, o que as filas e colunas não conseguem. Obtém uma tela onde arrasta cada elemento para o lugar pretendido, como um cabeçalho sobre uma foto. O exemplo coloca um cabeçalho branco de dia aberto sobre uma imagem. Para conteúdos lado a lado comuns, [as filas e colunas](/pt-pt/hc/documentation/learn-dxpr-builder/layout/rows-and-columns) são mais fáceis de manter arrumadas nos telemóveis.

  ## Adicionar um contentor de camadas posicionadas

1. Paire o cursor sobre a coluna e clique em **+** na sua barra de controlos, ou no **+** no meio de uma coluna vazia, para abrir o seletor de elementos.
2. No separador **Layout**, clique em **Positioned layers**.
3. As suas definições abrem-se primeiro. Defina **Height** para caber a camada mais alta e clique em **Save**. Aparece uma tela vazia.
4. Paire o cursor sobre a tela e clique em **+** na sua barra de controlos para adicionar um elemento, como **Text** ou um **Image**. Cada elemento adicionado torna-se uma camada que pode posicionar.

## O que vê

A tela mantém a altura definida e cada camada fica onde a colocou, por cima ou por baixo das outras. Os visitantes veem a composição como aparece no editor. As posições guardam-se como fração da tela, por isso uma camada mantém o seu lugar quando a tela estreita. O texto mantém o tamanho, salvo se ligar **Responsive**.

## Configure as suas camadas posicionadas

Abra as definições em **More** > **Settings** na barra de controlos de **Positioned layers**.

| Definição | O que faz | Predefinição |
|---|---|---|
| **Width** | Largura da tela, como 100% ou 600px | 100% |
| **Height** | Altura da tela em píxeis | 500 |
| **Responsive** | Ajusta a altura da tela e o texto à largura da tela, para a composição manter as proporções em ecrãs pequenos | Off |

## Posicionar camadas

- **Select**: clique numa camada. Aparecem pegas nos seus cantos e bordas.
- **Move**: arraste a camada pelo seu nome na sua barra de controlos, como **Text** ou **Image**. As camadas ficam dentro da tela.
- **Resize**: arraste uma pega da camada selecionada.
- **Add at a spot**: faça duplo clique numa parte vazia da tela. O seletor de elementos abre-se e o elemento novo fica onde clicou.

O menu **More** de cada camada tem quatro itens extra. **100% width** e **100% height** esticam a camada pela tela. **Bring forward** e **Send backward** movem-na para cima ou para baixo das outras camadas.

## Se não a vir

- **Uma camada não se move quando a arrasta.** As camadas só se movem pela pega com o seu nome na barra de controlos. Paire o cursor sobre a camada e arraste essa pega.
- **Uma camada esconde-se atrás de outra.** Está mais abaixo na pilha. Abra o menu **More** da camada e escolha **Bring forward**.
- **As camadas sobrepõem-se ou transbordam nos telemóveis.** **Responsive** está desligado, por isso a altura da tela e o texto mantêm o tamanho. Ligue **Responsive** nas definições de **Positioned layers**.
- **Falta Positioned layers no seletor dentro de uma tela.** Uma tela não pode conter outra tela. Adicione o novo elemento **Positioned layers** a uma coluna.
- **Falta Positioned layers no seletor em todo o lado.** O seu perfil de utilizador do DXPR Builder exclui-o. Um administrador marca **Layers** em **Elements** no seu perfil em `/admin/dxpr_studio/dxpr_builder/profile`.

## E a seguir?

- [Secções](/pt-pt/hc/documentation/learn-dxpr-builder/layout/sections): dê à área à volta da tela uma cor ou imagem de fundo.
- [Adicionar um esquema aninhado](/pt-pt/hc/documentation/learn-dxpr-builder/layout/nesting): combine camadas com filas e colunas em esquemas mais complexos.
- [Separador de animação](/hc/documentation/learn-dxpr-builder/design/animation-tab): deixe cada camada aparecer com o seu próprio efeito de entrada.