如何在 CSS 中使用 position 屬性

定位可以讓我們決定元素在螢幕上的出現位置和方式。

您可以移動元素並將它們放在希望的位置。

在這篇文章中，我們還將看到不同 position 屬性的元素之間互動時，在頁面上的變化。

我們有一個主要的 CSS 屬性：position。

它可以有以下5個值：

  • static
  • relative
  • absolute
  • fixed
  • sticky

靜態定位

這是元素的預設值。靜態定位的元素會按照正常的頁面流程顯示。

相對定位

如果在元素上設置position: relative，就可以使用偏移屬性來定位它，這些偏移屬性是：

  • top
  • right
  • bottom
  • left

它們被稱為偏移屬性。它們接受長度值或百分比。

看一下我在 Codepen 上創建的這個例子。我創建了一個父容器、一個子容器和一個帶有一些文本的內部框：

<div class="parent">
 <div class="child">
 <div class="box">
 <p>Test</p>
 </div>
 </div>
</div>

用一些 CSS 來賦予顏色和填充，但不會影響定位：

.parent {
 background-color: #af47ff;
 padding: 30px;
 width: 300px;
}

.child {
 background-color: #ff4797;
 padding: 30px;
}

.box {
 background-color: #f3ff47;
 padding: 30px;
 border: 2px dotted #333;
 font-family: courier;
 text-align: center;
 font-size: 2rem;
}

這是結果：

您可以嘗試將我之前提到的任何屬性（top，right，bottom，left）添加到.box，不會發生任何事情。位置是static的。

現在，如果我們將position: relative設置為框架，一開始似乎沒有什麼變化。但是，這個元素現在可以使用top，right，bottom，left屬性來移動，你可以相對於包含框架的元素來改變它的位置。

例如：

.box {
 /* ... */
 position: relative;
 top: -60px;
}

top屬性的負值會使框架相對於其容器向上移動。

或者

.box {
 /* ... */
 position: relative;
 top: -60px;
 left: 180px;
}

請注意，框架所佔用的空間仍在容器中保留，就像它仍然在原地一樣。

現在可以正常工作的另一個屬性是z-index，用於改變z軸的位置。我們稍後會談到它。

絕對定位

在元素上設置position: absolute會將其從文檔流中刪除，並且不再遵循原始的頁面定位流程。

記得在相對定位中，我們注意到元素原先所佔用的空間即使移動了位置也會被保留嗎？

使用絕對定位，一旦在.box上設置了position: absolute，它的原始空間就會塌陷，只剩下原點（x，y坐標）保持不變。

.box {
 /* ... */
 position: absolute;
}

現在，我們可以使用top，right，bottom，left屬性隨意移動框架：

.box {
 /* ... */
 position: absolute;
 top: 0px;
 left: 0px;
}

或者

.box {
 /* ... */
 position: absolute;
 top: 140px;
 left: 50px;
}

座標是相對於最靠近且不是static的容器。這意味著，如果在.child元素上添加了position: relative，並將top和left設置為0，框架將不會定位在視窗的左上角邊緣，而是會定位在.child的0, 0 座標：

.child {
 /* ... */
 position: relative;
}

.box {
 /* ... */
 position: absolute;
 top: 0px;
 left: 0px;
}

如果.child是靜態的（默認值），則會發生以下情況：

.child {
 /* ... */
 position: static;
}

.box {
 /* ... */
 position: absolute;
 top: 0px;
 left: 0px;
}

就像相對定位一樣，您可以使用z-index來改變z軸的位置。

固定定位

和絕對定位一樣，當一個元素被設置為position: fixed時，它將從頁面的流中移除。

絕對定位的區別在於：元素現在始終相對於窗口定位，而不是相對於第一個非靜態的容器。

.box {
 /* ... */
 position: fixed;
}


.box {
 /* ... */
 position: fixed;
 top: 0;
 left: 0;
}

另一個重大的區別是，元素不受滾動的影響。一旦您將一個粘性元素放在某個地方，滾動頁面不會將其從可見部分中移除。

粘性定位

儘管上面的值已經存在很長時間了，但這個值是最近引入的，而且仍然相對不支持（請參見 caniuse.com）。

當我想到position: sticky時，UITableView iOS元件就會浮現在我的腦海中。您知道當您在聯繫人列表中滾動時，第一個字母會固定在頂部的位置，以便讓您知道您正在查看該特定字母的聯繫人嗎？

我們使用 JavaScript 來模擬它，但這是 CSS 採用的方法，以允許它在本地實現。