CSS 中的 position 屬性只有幾個有效值，但這些值會導致無窮無盡的設計可能性，這使得學習定位相當困難。 在本文中，我將分解每個位置值並解釋您需要了解的有關它們的所有資訊。
靜態位置 Static Position
首先，我們將介紹您可能從未聽說過但一直使用的最簡單的位置值，那就是靜態位置。 static 是 position 屬性的預設值，本質上只是意味著元素將遵循正常的文件流並根據標準定位規則定位自身。您沒有設定位置屬性的任何元素都是靜態的，這意味著您使用的大多數元素都是靜態定位的。 靜態定位元素不能應用
z-index、top、left、right 或 bottom
屬性。
相對位置 Relative Position
下一個最簡單的位置型別是相對位置。 相對位置元素的工作方式與靜態位置完全相同，但您現在可以為其新增 z-index、top、left、right 和 bottom 屬性。 如果您在不設定任何這些額外屬性的情況下使元素相對定位，您會注意到它看起來與靜態定位元素完全相同。 這是因為相對定位的元素也遵循正常的文件流，但您可以使用 top、left、right 和 bottom 屬性來偏移它們。
設定偏移
從上面的示例中，您可以看到當沒有定義額外的屬性時，元素的工作方式與靜態一樣。 但是，一旦添加了 left 或 top 之類的屬性，您可以看到元素透過這些 top、left、right 和 bottom 屬性相對於其正常位置偏移了自身。 但是，您會注意到，這個偏移不會影響到其它元素。 這是因為所有其他元素都假定相對定位元素沒有偏移，並且它們根據相對定位元素在靜態時的位置來確定它們的位置。
現在，它自己的相對位置並沒有那麼有用，因為您通常不想在不移動元素周圍的所有元素的情況下偏移元素。 位置相對的主要用例是設定元素的 z-index，或者用作絕對定位元素的容器，我們將在下面討論。
絕對定位 Absolute Position
絕對位置是從正常文件流中完全移除元素的第一個位置。 如果你給一個元素絕對位置，所有其他元素都會表現得好像絕對定位的元素甚至不存在一樣。
可以看到，元素二和三的佈局就好像元素一從未存在過一樣。 您還會注意到第一個元素不再填滿整個寬度。 這是因為絕對定位元素的寬度預設為自動，而不是像 div 那樣全寬。 此外，預設情況下，絕對定位元素會將自身放置在文件中，如果它是靜態元素，它通常會呈現，但我們可以使用 top、left、right 和 bottom 屬性來更改它。
現在您可以看到我們的元素已移動到灰色邊框的左上角。 我使用這個灰色邊框來表示整個螢幕，因為預設情況下，絕對位置元素將相對於Body定位自身，因此頂部和左側為 0 表示該元素將出現在body的左上角。 您可以透過將其父元素之一的位置設定為靜態以外的任何值來更改絕對定位元素所在的元素。 這是使用相對位置最常見的地方之一。
透過將灰色父元素設定為相對位置，絕對定位的子元素位於父元素的左上角而不是Body。 這種相對位置和絕對位置的組合使用非常普遍。
固定位置 Fixed Position
現在我們來到一個較少使用的位置，即固定位置。 固定位置有點像絕對位置，因為它從文件流中刪除元素，但固定位置元素總是相對於螢幕定位，無論其父元素在什麼位置。
如您所見，我們的一個元素固定在頁面的左上角。 您還會注意到，當您滾動頁面時，無論您滾動到哪裡，它都會停留在頁面的左上角。 這是固定和絕對之間的主要區別。
粘性位置 Sticky Position
最後一個是較新的粘性位置。 這個位置是固定位置和靜態位置的結合，並結合了兩者的優點。 位置為粘性的元素將充當靜態定位元素，直到頁面滾動到該元素碰到指定的頂部、左側、右側或底部值的點。 然後它將像一個固定位置的元素一樣，隨著頁面滾動，直到元素到達其容器的末尾。
首先，您會注意到一個元素在文件流中處於其正常位置，就好像它是靜態的一樣。 一旦將頁面滾動到一個元素的頂部距離頁面頂部 10px 的位置，它就會像位置固定一樣粘在頁面頂部。 這將一直持續到元素到達紫色父容器的底部，在這種情況下它將停止與頁面一起滾動。
粘性位置是隨頁面滾動的導航欄、長列表中的標題以及許多其他用例的完美位置。
One More Thing about Absolute/Fixed Position
現在，您需要了解關於固定和絕對位置元素的一件事，因為它可能會導致一些奇怪的、難以發現的錯誤。 絕對定位的元素將使用第一個具有非靜態位置（非static）的父元素作為其容器來偏移自己，如果沒有父元素具有靜態以外的位置值，它將預設為Body。 我們已經知道了，但這並不是定義父容器的唯一方法。 絕對定位元素還將檢查設定了
transform, filter, or perspective
屬性的父級。 如果在父級上找到其中任何一個，它將使用該父級作為容器。
在上面的例子中，我們的灰色父元素是一個靜態位置，但由於它有一個transform屬性，所以它將充當我們絕對定位子元素的容器。綠色盒子將它視為定位的父容器。
最後：
希望大家都可以掌握這些定位方式，避免在開發中踩到坑！感謝閱讀！
