理解和使用 Divi 绝对位置的指南

绝对位置属性是 Divi 新位置选项中可用的四种主要位置类型之一。 在本教程中，我们将探讨在 Divi 中为元素赋予绝对位置意味着什么，以及在设计 Divi 站点时如何利用它来发挥自己的优势。

在这篇文章中，我们将介绍：

• 迪维四种定位概述
• 绝对位置如何“定位”Divi 中的元素
• 在 Divi 中使用绝对位置的优缺点
• 使用具有绝对位置的定位点
• 用例示例：绝对定位按钮以实现相同高度的模糊

一探究竟！

迪维四种定位概述

绝对位置是 Divi 中可用的四个位置选项之一。 以下是对每一项的快速概述。

静态（默认）

静态元素在技术上不是“定位”的，因为它们保持页面上元素的正常流动或顺序，并且它们不像其他定位元素那样响应顶部、右侧、底部和左侧的属性（这就是为什么没有偏移量在 Divi 中可用于静态/默认位置的元素）。 静态位置是任何 CSS 元素的默认位置。 在 Divi 中，当您为模块选择默认位置时，您选择的是静态位置。 还值得一提的是，Divi 中的某些元素（如行和节）默认会具有相对位置（而不是静态位置）。

相对的

相对定位的元素有点像静态元素，因为它们遵循页面的正常流程。 主要区别在于相对定位的元素可以使用 top、bottom、left 和 right 属性进行定位。 此外，与静态元素不同，它们也可以使用 Z 索引属性进行定位。

绝对

绝对定位的元素脱离了正常的文档流，因此页面上不会为该元素创建实际空间。 您可以将其视为浮动在页面上占用实际空间的其他元素之上的元素。 它将相对于最近定位的父容器定位。

固定的

和绝对位置一样，固定位置的元素会脱离页面的正常流程，在页面内没有创建实际空间。 绝对和固定之间的主要区别在于固定位置是相对于浏览器窗口或视口的。 换句话说，无论元素在页面的正常流中的哪个位置，一旦被赋予固定位置，它的位置现在将直接与浏览器窗口相关。 您可以使用 top、bottom、left 和 right 属性在视口中定位元素。 因为固定元素通常会悬停在页面上其他元素的后面或前面，Z 索引将帮助将固定元素排序在其他元素之上。

注意：CSS 中还有另一种定位类型，称为粘性。 粘性定位元素的行为类似于相对定位元素，直到您滚动到其容器（在某个点由顶部值确定）。 然后元素变得固定（或卡住），直到用户滚动到容器的末尾。 然而，粘性位置可能有点不可预测，因为其他因素可能会抑制功能。 在 Divi 中，由于这个原因，内置选项中没有粘性选项。 但是，有一些方法可以在 Divi 中使用 position:sticky。

绝对位置如何在 Divi 中“定位”一个元素

如概述中所述，绝对定位的元素将相对于最近定位的父容器进行定位。 定位父容器是任何容器，其位置值不是静态的（即相对的、绝对的、固定的）。 这就是为什么在大多数情况下，如果您想在其父容器（或列）中绝对定位一个元素（如模块），您需要在绝对定位子模块之前为该列提供一个相对位置。 如果不是，绝对定位模块将进一步查找文档/页面，以查找位置不是静态的最近祖先。 因此，在 Divi 中，默认情况下部分和行都具有相对位置，因此您可以轻松地将元素绝对定位在这些元素中。

这是如果我覆盖 Divi 对列的默认位置并将其设置为静态的绝对定位模块将执行的操作的说明。 请注意，由于该列不再具有位置，因此模块现在将相对于具有位置（相对）的行。

在 Divi 中使用绝对位置的优缺点

绝对位置只是定位元素的各种方法之一。 因此，涵盖使用绝对位置而不是其他位置的一些优点和缺点会很有用。

好处

以下是使用绝对位置相对于其他定位属性（如 Transform Translate 或 Margins）的一些好处：

好的设计工具

绝对位置 打破正常流程，因此元素的实际空间在定位发生后不会影响设计。 尽管这也可能是一个缺点，但只要您想将元素添加到已建立的设计中，而无需任何额外的清理工作（为布局添加额外空间可能需要），这可能是有益的。 换句话说，您可以向页面添加元素，而无需四处移动现有元素。

浮动和保证金的良好替代方案

使用绝对位置，您不必依赖浮动元素或使用边距来完成类似的定位。 尽管不是 Divi 中的本机选项，但熟悉 CSS 的人都知道您可以使用浮动将元素定位到右侧或左侧，这在某些情况下可能会有点错误和不可预测。 使用边距来定位元素也是如此。 有时很难预测准确的边距值以恰到好处地定位元素而不留下不必要的间距。 使用绝对位置对于浮动和边距都是一个很好的“精确定位”替代方案。

良好的浏览器支持

所有主要浏览器都广泛支持绝对位置属性，因此您通常可以相信它不会意外破坏其他浏览器上的内容。

缺点

以下是使用绝对位置时需要考虑的一些缺点：

隔离风险

因为绝对定位的元素脱离了正常的文档流，所以很难在它附近添加额外的元素。 它们与页面上的其他元素隔离开来。 例如，通常在Divi中，如果要在文本模块下添加按钮，只需添加一个模块，它就会自动驻留在文本模块下。 但是如果文本模块是绝对定位的，您还必须绝对定位按钮模块，然后使用顶部、底部、左侧和右侧属性将按钮定位在文本模块下方。 但是，绝对定位一列（父模块容器）可能更容易，这样列中的所有模块都可以遵循正常的文档流（例如定位一组模块而不是一个模块）。

反应迟钝

此外，由于绝对定位的元素脱离了文档流，因此很难对移动设备进行定位响应。 事实上，由于响应式设计带来的挑战，许多开发人员都避免使用 position:absolute。 因此，在需要时使用相对长度单位（如 vw 或 %）而不是绝对长度单位（如 px）很重要。

使用具有绝对位置的定位点

Divi 构建器中内置的位置位置选项使您只需单击一个位置点就可以非常轻松地绝对定位元素。 选择位置点后，您可以使用垂直和水平偏移量从该位置点进行额外的位置调整。

默认情况下，位置点将设置在左上角。 因此，将垂直和水平偏移添加到该位置将增加从顶部和左侧的额外间距。

从右上角位置开始，垂直偏移将从顶部增加空间，水平偏移将向右侧增加空间。

从右下角位置开始，垂直偏移将从底部增加空间，水平偏移将向右侧增加空间。

从左下角位置开始，垂直偏移将从底部添加空间，水平偏移将从左侧添加空间。

调整居中绝对元素

每当您选择具有居中位置的位置选项时，Divi 都会使用 CSS 属性的组合来确保元素无论大小都完美居中。 例如，如果 y0u 选择位置位置左居中，Divi 将按如下方式定位元素：

这是后端中 CSS 的样子。

position: absolute!important;
top: 50%;
bottom: auto;
left: 0px;
right: auto;
transform: translateY(-50%);

top:50% 用于将元素的顶部定位在距离其容器顶部 50% 的位置。 transform:translateY(-50%) 用于使元素向上正好是其自身高度的一半。 无论高度如何，这都能为您提供完美放置的元素。

如果您想对居中位置的元素进行额外调整（或偏移），了解这一点很重要。 您不想在不知道已经使用的值的情况下犯使用转换转换选项的错误。 出于这个原因，除非您了解自己在做什么，否则最好使用 Divi 中的边距属性而不是转换翻译进行较小的调整。

使用 Transform Translate 选项为中心位置定位多个绝对元素

如果您确实了解如何使用 transform:translate，它实际上对于偏移居中元素非常有用，而无需知道元素的宽度。

例如，假设您使用 Divi 中的一列将模块定位为垂直和水平居中。 它看起来像这样。

如果我给元素一个转换转换如下，什么都不会改变：

• 变换翻译（Y）：-50%
• 变换翻译(X)：-50%

这是因为 Divi 已经在后端为您自动执行了此操作。 知道了这一点，您可以使用变换平移选项从中心点位置进行调整。 如果您使用百分比长度单位，则无需知道模块的宽度或高度即可进行调整，因为 100% 等于模块的宽度或高度。 因此，如果您想将四个模块添加到列的中心，您可以使用变换选项来偏移每个绝对定位的模块。

为此，您将创建四个模块，并为它们提供一个绝对位置，其位置垂直和水平居中。

然后，使用变换平移选项根据模块的宽度和高度的百分比相应地调整模块的位置。 例如，为模块提供 -100% 的变换平移 Y 轴值将使模块向上达到模块的确切高度。 为模块提供 -100% 的 X 轴值将使模块向左移动模块的确切宽度。 这对于组合绝对居中的元素来说非常有用。

用例示例：绝对定位按钮以实现相同高度的模糊

在 Divi 中使用绝对位置的一个实际应用是给按钮一个列内的绝对位置，这样即使按钮上方内容的数量（或高度）可能发生变化，该按钮仍会保持在列的底部。 在页面上展示项目时，这是保持设计一致的好方法。

这是如何做到的。

首先，向该部分添加一列行。

然后在列中添加一个模糊模块。

接下来，在模糊模块下方添加一个按钮模块。

打开行设置并复制该列两次以获得总共三个相同的列，每个列都具有相同的模糊和按钮模块。

然后转到行设置并选择均衡列高的选项。 这将确保列将调整到具有最大高度（或最多内容）的列的高度。

现在更新每个简介模块的正文内容，以便每列的内容量不同。 您应该看到下面的按钮将移动到模糊模块正下方的位置，使每个按钮在列中处于不同的位置。

使用多选，选择每个按钮模块并更新每个按钮的以下元素设置：

• 位置：绝对
• 位置：左下角

这会将每个按钮绝对定位在列的左下角。 但是由于按钮现在位于页面上元素的正常流之外，您会注意到按钮和最左列中的模糊模块有一些重叠。 为了解决这个问题，我们只需要通过向列添加一些填充来为按钮腾出一些实际空间，如下所示：

• 填充：底部 50px

现在您拥有三个特色项目，每个项目的按钮位置一致，即使内容量（或简介的高度）可能会发生变化。

最后的想法

我希望这篇文章能够阐明绝对位置属性以及它在 Divi 中的强大功能。 一旦您了解了该职位的运作方式，您就可以添加各种精确的设计元素，将您的网站提升到一个新的水平。

我期待在评论中收到您的来信。

干杯!