理解和使用 Divi 中的相对位置

相对位置属性可能是最神秘的位置类型。 但是，一旦我们了解了它的工作原理，我们就可以在 Divi 中设计站点时利用它。 我们的发现可能会让您大吃一惊。

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

• 迪维四种定位概述
• 相对位置如何“定位”Divi 中的元素
• 在 Divi 中使用相对位置的 5 个理由
• 相对头寸与保证金
• 相对位置 vs. 变换

一探究竟！

迪维四种定位概述

相对位置是 Divi 中可用的四种位置类型之一。 以下是对每一项的快速概述。

静态（默认）

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

相对的

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

绝对

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

固定的

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

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

相对位置如何“定位”Divi 中的元素

正如概述中提到的，相对位置类型类似于静态“位置”，因为元素保持在文档的正常流中（页面上的 HTML）。 真正的区别在于，一旦我们为元素分配了相对位置，它现在就有了用于定位元素的新选项。 这些选项包括顶部、底部、左侧和右侧属性以及 Z 索引属性。

在 Divi 中，一旦选择了相对位置，就可以在位置选项组下找到这些额外的位置选项。

使用具有相对位置的偏移量

Offset Origin 和 Offset 值将一起工作以将我们的元素定位在父容器中我们想要的任何位置。 在这个例子中，我们有一个模块，它有一个相对位置、一个左上角的偏移量、一个 25px 的垂直偏移量和一个 25px 的水平偏移量。 请注意偏移值如何将元素水平和/或垂直地从偏移原点移开。

这是具有相同偏移但具有右上角偏移原点的相同模块。

这是具有相同偏移量和右下角偏移原点的相同模块。

这是具有相同偏移量和左下角偏移原点的相同模块。

无间距惊喜

对于相对定位，使用偏移量（顶部、底部、左侧、右侧）移动元素后，元素的实际空间仍保留在其原始位置。 元素的新位置不会移动或影响页面上其余元素的任何间距。 它基本上像一个离开身体的精神一样盘旋在其他元素上。

使用相对位置的原因

#1 为绝对定位的元素渲染父容器

这可能是相对位置类型最流行的应用。 由于任何绝对定位元素都相对于最近的定位祖先，我们可以选择使其祖先之一成为定位元素，只需给它一个相对位置（默认的静态位置在技术上不是“定位”）。 这使文档流保持原位（如静态），并允许我们为绝对元素选择一个容器。

#2 在不影响页面上其他元素的情况下移动元素。

通过相对位置，我们可以使用偏移量将项目微调对齐，而不会影响任何其他元素。 使用 Divi，我们可以利用可拖动的 UI 实时可视化定位元素。

#3 使用 Z 索引重叠其他元素

默认情况下，除非给出相对位置，否则静态元素无法在 z 轴上重新排序。 一旦处于相对位置，元素将保持在文档的正常流中。 直到现在，我们才能够利用 Z 索引在元素彼此重叠时按特定顺序放置元素。

#4 避免为头寸目的使用负保证金

相对定位会留下原来位置的空间。 但是，对于负边距，内容及其原始空间都被重新定位。 例如，如果我们在 Divi 中为一行添加一个负的上边距，以便该行与其上方的行重叠，则所有行/内容都将随之向上移动。 这留下了一些需要清理的混乱，而这可以通过使用相对位置偏移来避免。

这是当我们使用负上边距向上移动模块时会发生什么的说明。 注意下面的其余元素是如何被提出的。

如果我们给同一个模块一个相对位置，我们可以使用垂直偏移将模块向上移动，而不会影响页面上的其余间距。

尽管我经常使用负边距来定位 Divi 中的元素，但如果我们可以使用相对定位来代替它可能不是一个好主意。 边距与元素的框模块有关，因此它实际上是为了在元素本身内部和周围添加间距，而不是像相对定位那样定位元素与其父容器的偏移量。

相对位置 vs 变换平移

相对位置与使用变换转换在页面上定位元素非常相似。 它们都移动元素，同时将实际空间保留在其原始位置，并且不会影响页面上的其他元素。

Translate 更适合动画和过渡（如悬停效果）

然而，似乎 translate 最适合动画和过渡（如悬停效果），因为它提供了更快、更平滑的过渡。 使用顶部、底部、左侧和右侧的偏移量来为相关元素设置动画或过渡可能会更加不稳定，并且可能会使我们的浏览器工作得比它需要的更难。

相对长度单位的反应不同

如果我们在响应式设计中使用相对长度单位（如 % 或 vw），则这些单位在相对位置和变换平移时会有所不同。

具有相对位置和 50% 水平偏移的 Divi 模块将水平移动模块，其量等于父容器（或列）宽度的 50%。

具有 50% 变换平移（X 轴）的 Divi 模块将水平移动模块，其量等于模块本身宽度的 50%。

结合相对位置和变换平移到中心元素

正如我们刚刚介绍的，相对位置是相对于父元素的，而 transform translate 属性是相对于元素本身的。 因此，我们可以按照我们想要的方式结合使用两者来定位元素。 我们甚至可以使用这种技术将元素在其容器中居中。

例如，我们可以使用相对位置水平偏移将模块定位到列宽的 50% 的右侧。

然后使用 translate 属性将模块向左移动 50%（模块宽度的）。 这将确保无论模块的宽度如何，模块都位于列的中心。

最后的想法

如果你和我在写这篇文章之前一样，你可能没有很好地理解或使用相对位置类型。 也许这个相对位置最令人惊讶的方面是它如何影响（或不影响）页面上的其余设计。 它不仅可以与绝对元素协同工作，而且还可以很好地与变换转换一起工作，以将元素定位在完美的位置。

您对相对位置类型的体验如何？

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

干杯!