理解和使用 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%（模塊寬度的）。 這將確保無論模塊的寬度如何，模塊都位於列的中心。

最後的想法

如果你和我在寫這篇文章之前一樣，你可能沒有很好地理解或使用相對位置類型。 也許這個相對位置最令人驚訝的方面是它如何影響（或不影響）頁面上的其餘設計。 它不僅可以與絕對元素協同工作，而且還可以很好地與變換轉換一起工作，以將元素定位在完美的位置。

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

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

乾杯!