WordPress divi主题

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

| 5月 7, 2022 | Divi主题使用教程 | 0 条评论

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

在这篇文章中,我们将介绍:

  • Divi的四种定位方式概述
  • 相对位置如何“定位” Divi 中的元素
  • 在 Divi 中使用相对位置的 5 个原因
  • 相对头寸与保证金
  • 相对位置与变换平移

看看这个!

Divi的四种定位方式概述

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

静态(默认)

Divi 绝对位置

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

相对的

Divi 绝对位置

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

绝对

Divi 绝对位置

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

WordPress divi主题

固定的

Divi 绝对位置

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

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

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

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

在 Divi 中,一旦选择了相对位置,就可以在位置选项组下找到这些附加位置选项。

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

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

Divi 中的相对位置

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

Divi 中的相对位置

fiverr建站WordPress程序员

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

Divi 中的相对位置

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

Divi 中的相对位置

没有间距惊喜

使用相对定位,元素的实际空间在元素使用偏移量(上、下、左、右)移动后保持在其原始位置。 元素的新位置不会移动或影响页面上其余元素的任何间距。 它基本上像离开身体的灵魂一样悬停在其他元素上。

Divi 中的相对位置

独立站选品工具

使用相对位置的原因

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

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

Divi 中的相对位置

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

使用相对位置,我们可以使用偏移量来推动项目对齐,而不会影响任何其他元素。 而借助 Divi,我们可以利用可拖动的 UI 实时可视化定位元素。

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

默认情况下,静态元素不能在 z 轴上重新排序,除非给定相对位置。 一旦处于相对位置,元素将保持在文档的正常流中。 直到现在,我们才有能力利用 Z 索引在相互重叠时以特定顺序放置元素。

Divi 中的相对位置

高质量外链购买

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

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

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

Divi 中的相对位置

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

Divi 中的相对位置

JasperAI 10000字免费额度试用

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

相对位置与变换平移

相对位置非常类似于使用 transform translate 来定位页面上的元素。 它们都在移动元素的同时将实际空间保留在其原始位置,并且不会影响页面上的其他元素。

翻译更适合动画和过渡(如悬停效果)

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

相对长度单位反应不同

如果我们使用相对长度单位(如 % 或 vw)进行响应式设计,则这些单位在相对位置和变换平移时的工作方式会有所不同。

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

WordPress备份工具updrafplus

Divi 中的相对位置

转换平移(X 轴)为 50% 的 Divi 模块将水平移动模块,移动量等于模块本身宽度的 50%。

Divi 中的相对位置

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

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

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

Divi 中的相对位置

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

Divi 中的相对位置

最后的想法

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

您对相对位置类型有何经验?

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

干杯!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题