理解和使用 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 中的強大功能。 一旦您了解了該職位的運作方式，您就可以添加各種精確的設計元素，將您的網站提升到一個新的水平。

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

乾杯!