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

固定位置屬性是學習如何正確使用的關鍵位置類型。 固定元素對於改善您網站上的用戶體驗很重要。 滾動瀏覽網頁時固定標題保持在視圖中，使用戶更容易瀏覽網站。 固定的側邊欄保持重要的 CTA 和電子郵件選項可見，從而促進轉化。 固定通知欄、彈出窗口和許多其他內容也是如此。 一旦我們了解了固定位置的工作原理以及如何在 Divi 中正確使用它，我們將擁有一個強大的設計工具，將我們的 Divi 站點提升到一個新的水平。

在這篇文章中，我們將介紹：

• 迪維四種定位概述
• 固定位置如何“定位”Divi 中的元素
• 在 Divi 中使用固定位置選項
• 使用固定位置時要記住的提示
• 在 Divi 中使用固定位置的 6 種有用方法

一探究竟！

迪維四種定位概述

固定頭寸是 Divi 頭寸選項中可用的四種頭寸類型之一。 以下是對每一項的快速概述。

靜態（默認）

靜態元素在技術上不是“定位”的，因為它們保持頁面上元素的正常流動或順序，並且它們不會像其他定位元素一樣響應頂部、右側、底部和左側的屬性（這就是為什麼沒有偏移量在 Divi 中可用於靜態/默認位置的元素）。 在 Divi 中，當我們為模塊選擇默認位置時，我們選擇的是靜態位置。 還值得一提的是，Divi 中的某些元素（如行和節）默認會具有相對位置（而不是靜態位置）。

相對的

相對定位的元素有點像靜態元素，因為它們遵循頁面的正常流程。 主要區別在於相對定位的元素可以使用 top、bottom、left 和 right 屬性進行定位。 此外，與靜態元素不同，它們也可以使用 Z 索引屬性進行定位。

有關更多信息，請查看我們在 Divi 中理解和使用相對位置的指南。

絕對

絕對定位的元素脫離了正常的文檔流，因此頁面上不會為該元素創建實際空間。 我們可以將其視為浮動在頁面上佔據實際空間的其他元素之上的元素。 它將相對於最近定位的父容器定位。

有關更多信息，請查看我們在 Divi 中理解和使用絕對位置的指南。

固定的

和絕對位置一樣，固定位置的元素會脫離頁面的正常流程，在頁面內沒有創建實際空間。 絕對和固定之間的主要區別在於固定位置是相對於瀏覽器窗口或視口的。 換句話說，無論元素在頁面的正常流中的哪個位置，一旦被賦予固定位置，它的位置現在將直接與瀏覽器窗口相關。 我們可以使用 top、bottom、left 和 right 屬性在視口中定位元素。 因為固定元素通常會懸停在頁面上其他元素的後面或前面，Z 索引將幫助將固定元素排序在其他元素之上。

注意：CSS 中還有另一種定位類型，稱為粘性。 一個粘性定位元素的行為就像一個相對定位元素，直到我們滾動到它的容器（在某個點由頂部值確定）。 然後元素變得固定（或卡住），直到用戶滾動到容器的末尾。 然而，粘性位置可能有點不可預測，因為其他因素可能會抑制功能。 粘性定位將在不久的將來被內置到 Divi 中。

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

正如概述中提到的，固定位置類型類似於絕對位置，因為元素脫離了文檔的正常流（頁面上的 HTML）。 脫離文檔流意味著該元素不會留下它最初位於頁面上的實際空間。 這是一個模塊的說明，其中相對位置更改為固定位置。 注意它最初在列中創建/佔據的區域現在如何消失，模塊現在固定在瀏覽器窗口的左上角。

固定位置和絕對位置的最大區別在於，與相對於其父容器的絕對位置不同，固定位置是相對於瀏覽器窗口或視口的。 這就是為什麼當用戶向下滾動頁面時固定元素會在視圖中顯示而絕對定位元素可能不會。

這是向下滾動頁面時三個位置（相對、絕對和固定）如何工作的說明。 請注意，固定模塊在用戶滾動時保持原位（相對於瀏覽器定位）。

在 Divi 中使用固定位置選項

在 Divi 中，您可以通過在高級選項卡下的位置選項組切換中選擇固定位置選項來為任何元素提供固定位置。 選擇相對位置後，您還將找到其他固定位置選項（位置、偏移、z 索引）。

調整固定位置的基準位置

選擇固定位置後，您可以使用可視化定位界面選擇基準位置。 根據您選擇的基本位置，新的 X 和 Y 偏移控件將可用。

使用固定位置的偏移量

垂直和水平偏移控件允許您進一步調整固定元素在其位置軸上的基本位置。

Offset Origin 和 Offset 值將一起工作以將我們的元素定位在瀏覽器視口中我們想要的任何位置。 在這個例子中，我們有一個模塊，它有一個固定的位置、一個左上角的偏移原點、一個 50px 的垂直偏移和一個 50px 的水平偏移。 請注意偏移值如何將元素水平和/或垂直（遠離瀏覽器的左上角）從偏移原點移開。

在 Divi 中為固定元素使用水平和垂直偏移值（如 CSS 中的頂部、底部、左側和右側屬性）時，重要的是要記住這些值將相對於瀏覽器視口定位元素。 Z Index 屬性也可以通過固定元素派上用場。 因為大多數時候您希望這些固定元素位於頁面上其他元素的前面，所以您需要給它一個較高的 Z 索引值（如 9999）。

使用可拖動錨點重新定位頁面上的固定元素

當您將元素的位置更改為“固定”時，將鼠標懸停在該元素上時會出現一個可拖動的錨點。 這允許您拖動元素以更改其位置。 當您重新定位元素時，它的 X 和 Y 偏移會在模塊設置中進行調整。

使用固定定位的一些技巧

為移動設備調整固定元素

不要忘記，您可以為響應式設計在不同的設備顯示器上設置不同的位置和偏移。 例如，您可能希望在桌面上使用固定標題，但在移動設備上則不需要。 固定側邊欄對桌面很有意義，但在手機顯示器上卻不太可能。 要進行切換，您可以在平板電腦和手機上將 Divi 中的位置選項調整為相對。 這會將其快速恢復到文檔流中的原始位置。

為固定元素創建空間

因為固定位置將元素放置在文檔流之外，所以它們位於頁面內容之上。 因此，如果您不希望固定元素隱藏內容，則需要為固定元素創建空間。 這可以通過多種方式完成，但通常通過向頁面佈局添加填充或邊距來完成。

一個很好的例子是固定的側邊欄。 如果您想在 Divi 中向頁面模板添加固定側邊欄，首先需要確保減少主要內容區域的寬度，以便為固定側邊欄創建必要的空間。 因此，如果您使用部分來創建側邊欄，則可以為該部分提供固定位置、100% 的高度和 300px 的寬度。

然後，您需要為包含帖子內容模塊（頁面的主要內容區域）的另一部分提供 300 像素的左邊距，以容納頁面左側邊欄的寬度。

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

除非在您的頁面上為固定元素提供了足夠的空間，否則它將與頁面上的其他內容重疊。 在大多數情況下，您希望固定元素在滾動時與頁面上的其他元素碰撞時保持可見（在頂部）。 為此，您可以向固定元素添加更高的 Z 索引，以確保它位於 Z 空間中的所有其他內容之上。 如果您不知道該賦予什麼值，則可以添加一個大數字，例如 9999。

使用固定位置的 6 種方法

#1 固定標題

新的固定位置選項的最佳用途之一是創建固定標題。 使用 Divi Theme Builder，您可以構建一個完全自定義的標題並使整個部分固定。

如何發布

這是關於如何在 Divi 中構建固定標題的帖子：

• 如何使用 Divi 的位置選項創建固定標題

#2 固定頁腳欄

就像固定頁眉一樣，一些網站也受益於固定頁腳或頁腳欄。 這允許用戶在更微妙的位置將突出信息放在最前面。 固定頁腳欄非常適合手機，因為它們非常接近那些渴望點擊按鈕的拇指。

操作指南

以下是一些關於如何在 Divi 中構建固定頁腳欄的帖子：

• 如何為您的 Divi 主題創建固定的頁腳欄
• 如何使用 Divi 創建固定的移動頁腳欄
• 如何在 Divi 中創建（固定）移動聯繫人欄

#3 固定側邊欄/垂直菜單

固定的側邊欄讓訪問者在瀏覽您的網站時隨時可以使用菜單、電子郵件選擇加入和 CTA 等內容。 如果你願意，你可以將溢出滾動添加到固定側邊欄，以獲得一個包含大量內容的漂亮的可滾動固定側邊欄。

操作指南

這是一篇關於如何在 Divi 中構建固定側邊欄的帖子：

• 如何使用 Divi 構建帶有平滑滾動錨鏈接的響應式固定側邊欄
• 如何為您的 Divi 網站創建垂直（固定）導航菜單

#4 固定的返回頂部按鈕

返回頂部按鈕通常固定在網站的右下角，始終可供用戶單擊以將它們發送回頁面頂部。

這是一篇關於如何在 Divi 中構建固定的返回頂部按鈕的帖子：

• 如何使用 Divi 創建自定義粘性（固定）返回頂部設計

#5 固定菜單

大多數滑入或彈出的菜單都有一個固定的位置。 這些也非常適合移動設備。

這是一篇關於如何在 Divi 中構建固定菜單的帖子：

• 如何使用 Divi 的 Theme Builder 創建響應式滑入式菜單

#6 固定通知框、號召性用語、電子郵件選擇加入等……

這是一篇關於如何在 Divi 中構建固定通知框的帖子：

• 如何在 Divi 中向頁面模板的任何角落添加可關閉的滑入式號召性用語

最後的想法

在遇到使用固定位置的需要之前，您不會在 Web 開發中走得很遠。 它用於構成網站的許多關鍵元素。 在 Divi 中，固定位置只需點擊一下即可，但重要的是要了解它是如何工作的才能很好地使用它。 希望本文能幫助您了解如何更好地使用 Divi 中的固定位置，以便您可以將下一個項目提升到新的高度。

您對固定位置類型的體驗如何？

我期待在評論中收到您的來信。

乾杯!