理解和使用 Divi 中固定位置的指南

已发表: 2020-06-19

固定位置属性是学习如何正确使用的关键位置类型。固定元素对于改善您网站上的用户体验很重要。滚动浏览网页时固定标题保持在视图中，使用户更容易浏览网站。固定的侧边栏保持重要的 CTA 和电子邮件选项可见，从而促进转化。固定通知栏、弹出窗口和许多其他内容也是如此。一旦我们了解了固定位置的工作原理以及如何在 Divi 中正确使用它，我们将拥有一个强大的设计工具，将我们的 Divi 站点提升到一个新的水平。

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

迪维四种定位概述
固定位置如何“定位”Divi 中的元素
在 Divi 中使用固定位置选项
使用固定位置时要记住的提示
在 Divi 中使用固定位置的 6 种有用方法

一探究竟！

迪维四种定位概述

固定头寸是 Divi 头寸选项中可用的四种头寸类型之一。以下是对每一项的快速概述。

静态（默认）

Divi 绝对位置

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

相对的

Divi 绝对位置

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

有关更多信息，请查看我们在 Divi 中理解和使用相对位置的指南。

绝对

Divi 绝对位置

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

有关更多信息，请查看我们在 Divi 中理解和使用绝对位置的指南。

固定的

Divi 绝对位置

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

注意：CSS 中还有另一种定位类型，称为粘性。一个粘性定位元素的行为就像一个相对定位元素，直到我们滚动到它的容器（在某个点由顶部值确定）。然后元素变得固定（或卡住），直到用户滚动到容器的末尾。然而，粘性位置可能有点不可预测，因为其他因素可能会抑制功能。粘性定位将在不久的将来被内置到 Divi 中。

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

正如概述中提到的，固定位置类型类似于绝对位置，因为元素脱离了文档的正常流（页面上的 HTML）。脱离文档流意味着该元素不会留下它最初位于页面上的实际空间。这是一个模块的说明，其中相对位置更改为固定位置。注意它最初在列中创建/占据的区域现在如何消失，模块现在固定在浏览器窗口的左上角。

div 固定位置

固定和绝对的最大区别在于，与相对于其父容器的绝对位置不同，固定位置是相对于浏览器窗口或视口的。这就是为什么当用户向下滚动页面时固定元素会在视图中显示而绝对定位元素可能不会。

这是向下滚动页面时三个位置（相对、绝对和固定）如何工作的说明。请注意，固定模块在用户滚动时保持原位（相对于浏览器定位）。

在 Divi 中使用固定位置选项

在 Divi 中，您可以通过在高级选项卡下的位置选项组切换中选择固定位置选项来为任何元素提供固定位置。选择相对位置后，您还将找到其他固定位置选项（位置、偏移、z 索引）。

div 固定位置

调整固定位置的基准位置

选择固定位置后，您可以使用可视化定位界面选择基准位置。根据您选择的基本位置，新的 X 和 Y 偏移控件将可用。

使用固定位置的偏移量

垂直和水平偏移控件允许您进一步调整固定元素在其位置轴上的基本位置。

Offset Origin 和 Offset 值将一起工作以将我们的元素定位在浏览器视口中我们想要的任何位置。在这个例子中，我们有一个模块，它有一个固定的位置、一个左上角的偏移原点、一个 50px 的垂直偏移和一个 50px 的水平偏移。请注意偏移值如何将元素水平和/或垂直（远离浏览器的左上角）从偏移原点移开。

div 固定位置

在 Divi 中为固定元素使用水平和垂直偏移值（如 CSS 中的顶部、底部、左侧和右侧属性）时，重要的是要记住这些值将相对于浏览器视口定位元素。 Z Index 属性也可以通过固定元素派上用场。因为大多数时候您希望这些固定元素位于页面上其他元素的前面，所以您需要给它一个较高的 Z 索引值（如 9999）。

使用可拖动锚点重新定位页面上的固定元素

当您将元素的位置更改为“固定”时，将鼠标悬停在该元素上时会出现一个可拖动的锚点。这允许您拖动元素以更改其位置。当您重新定位元素时，它的 X 和 Y 偏移会在模块设置中进行调整。

使用固定定位的一些技巧

为移动设备调整固定元素

不要忘记，您可以为响应式设计在不同的设备显示器上设置不同的位置和偏移量。例如，您可能希望在桌面上使用固定标题，但在移动设备上则不需要。固定侧边栏对桌面很有意义，但在手机显示器上却不太可能。要进行切换，您可以在平板电脑和手机上将 Divi 中的位置选项调整为相对。这会将其快速恢复到文档流中的原始位置。

div 固定位置

为固定元素创建空间

因为固定位置将元素放置在文档流之外，所以它们位于页面内容之上。因此，如果您不希望固定元素隐藏内容，则需要为固定元素创建空间。这可以通过多种方式完成，但通常通过向页面布局添加填充或边距来完成。

一个很好的例子是固定的侧边栏。如果您想在 Divi 中向页面模板添加固定侧边栏，首先需要确保减少主要内容区域的宽度，以便为固定侧边栏创建必要的空间。因此，如果您使用部分来创建侧边栏，则可以为该部分提供固定位置、100% 的高度和 300px 的宽度。

div 固定位置

然后，您需要为包含帖子内容模块（页面的主要内容区域）的另一部分提供 300 像素的左边距，以容纳页面左侧边栏的宽度。

div 固定位置

为固定元素使用更高的 Z 索引

除非在您的页面上为固定元素提供了足够的空间，否则它将与页面上的其他内容重叠。在大多数情况下，您希望固定元素在滚动时与页面上的其他元素碰撞时保持可见（在顶部）。为此，您可以向固定元素添加更高的 Z 索引，以确保它位于 Z 空间中的所有其他内容之上。如果您不知道该赋予什么值，则可以添加一个大数字，例如 9999。