---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/layout/positioned-layers'
title: '添加定位图层容器 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:19:35+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: '当需要元素重叠或位于精确位置（行和列做不到）时使用 Positioned layers。获得画布，将每个元素拖到想要的位置，如照片上的标题。本例将白色开放日标题叠在图像上。普通并排内容，行和列 在手机上更易保持整洁。'
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: 添加定位图层容器
      description: '当需要元素重叠或位于精确位置（行和列做不到）时使用 Positioned layers。获得画布，将每个元素拖到想要的位置，如照片上的标题。本例将白色开放日标题叠在图像上。普通并排内容，行和列 在手机上更易保持整洁。'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:19:35+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/zh-hans/hc/documentation/learn-dxpr-builder/layout/positioned-layers'
      articleSection: Lay-out
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/layout/positioned-layers'
      description: '当需要元素重叠或位于精确位置（行和列做不到）时使用 Positioned layers。获得画布，将每个元素拖到想要的位置，如照片上的标题。本例将白色开放日标题叠在图像上。普通并排内容，行和列 在手机上更易保持整洁。'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: 首页
            item: 'https://dxpr.com/zh-hans'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: zh-hans
---
[Help Center](/zh-hans/node/75)/[Documentation](/zh-hans/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) # 添加定位图层容器.

 Learn DXPR BuilderBuild pagesAdd contentLay-out

   ## In this guide

 Related guides

- [添加版块](/zh-hans/hc/documentation/learn-dxpr-builder/layout/sections)
- [添加嵌套布局](/zh-hans/hc/documentation/learn-dxpr-builder/layout/nesting)
- [让元素随滚动、悬停或点击动起来](/zh-hans/hc/documentation/learn-dxpr-builder/design/animation-tab)

当需要元素重叠或位于精确位置（行和列做不到）时使用 Positioned layers。获得画布，将每个元素拖到想要的位置，如照片上的标题。本例将白色开放日标题叠在图像上。普通并排内容，[行和列](/zh-hans/hc/documentation/learn-dxpr-builder/layout/rows-and-columns) 在手机上更易保持整洁。

  ## 添加定位图层容器

1. 悬停列并点击 **+** 在其控制栏中，或 **+** 在空白列中间，以打开元素选择器。
2. 在 **Layout** 选项卡，点击 **Positioned layers**.
3. 其设置首先打开。设置 **Height** 以便最高图层容纳，然后点击 **Save**。空画布出现。
4. 悬停画布并点击 **+** 在其控制栏中以添加元素，例如 **Text** 或一个 **Image**。添加的每个元素成为可定位的图层。

## 您会看到的内容

画布保持您设置的高度，每个图层位于您放置的位置，在其他图层之上或之下。访客看到的构图与编辑器中一致。位置按画布比例存储，因此画布变窄时图层保持位置。文本保持大小，除非打开 **Responsive**.

## 设置定位图层

从以下位置打开设置 **More** > **Settings**：**Positioned layers** 控制栏。

| 设置 | 它的作用 | 默认值 |
|---|---|---|
| **Width** | 画布宽度，例如 100% 或 600px | 100% |
| **Height** | 画布高度（像素） | 500 |
| **Responsive** | 随画布宽度缩放画布高度和文本，以便构图在小屏幕上保持比例 | Off |

## 定位图层

- **Select**：点击图层。控制柄出现在其角和边上。
- **Move**：通过图层在其控制栏中的名称拖拽图层，例如 **Text** 或 **Image**。图层保留在画布内。
- **Resize**：拖拽所选图层的控制柄。
- **Add at a spot**：双击画布空白处。元素选择器打开，新元素落在您点击的位置。

每个图层的 **More** 菜单有四个额外项。**100% width** 和 **100% height** 将图层拉伸到整个画布。**Bring forward** 和 **Send backward** 将其移到其他图层之上或之下。

## 如果您看不到它

- **拖拽时图层不动。** 图层仅通过控制栏中带其名称的手柄移动。悬停图层并拖动手柄。
- **图层藏在另一图层后面。** 它在堆叠中位置较低。打开图层的 **More** 菜单并选择 **Bring forward**.
- **图层在手机上重叠或溢出。** **Responsive** 关闭，因此画布高度和文本保持尺寸。打开 **Responsive**：**Positioned layers** 设置。
- **定位图层在画布内的选择器中缺失。** 画布不能容纳另一个画布。添加新的 **Positioned layers** 元素到列中。
- **定位图层在所有位置的选择器中缺失。** DXPR Builder 用户资料省略它。管理员勾选 **Layers** 在 **Elements** 在您的资料中，位于 `/admin/dxpr_studio/dxpr_builder/profile`.

## 接下来做什么？

- [版块](/zh-hans/hc/documentation/learn-dxpr-builder/layout/sections)：为画布周围区域设置背景颜色或图像。
- [嵌套](/zh-hans/hc/documentation/learn-dxpr-builder/layout/nesting)：在更复杂的布局中将图层与行列结合。
- [动画选项卡](/zh-hans/hc/documentation/learn-dxpr-builder/design/animation-tab)：让每个图层以自己的进入效果出现。