CSS位置屬性

如何使用`position`CSS中的屬性

定位使我們能夠確定元素在屏幕上的顯示位置以及顯示方式。

您可以移動元素，然後將它們精確定位在所需的位置。

在這篇文章中，我還將根據元素之間的差異如何查看頁面上的事物變化。position彼此互動。

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

它可以具有這5個值：

static
relative
absolute
fixed
sticky

靜態定位

這是元素的默認值。靜態定位的元素顯示在常規頁面流中。

相對定位

如果您設定position: relative現在，您可以使用屬性在元素上以偏移量定位

最佳
正確的
底部
剩下

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

拿我在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在元素上將其從文檔流中刪除，並且將不再遵循頁面定位流。

還記得相對定位時，我們是否注意到元素原來佔據的空間被保留了，即使它被移動了嗎？

有了絕對的定位，我們一經設定position: absolute在.box，現在它的原始空間已折疊，只有原點（x，y坐標）保持不變。

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

現在，我們可以使用top，right，bottom，left特性：

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

或者

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

坐標是相對於最近的容器，而不是static。

這意味著如果我們添加position: relative到.child元素，然後我們設置top和left設置為0，則該框將不會定位在窗戶，而是將其定位在的0，0坐標處.child：

.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）

我想到的就是UITableView iOS組件position: sticky。您知道在滾動聯繫人列表並將第一個字母粘貼在頂部時，是否知道您正在查看該特定字母的聯繫人嗎？

我們使用JavaScript進行了仿真，但這是CSS原生採用的方法。

免費下載我的CSS手冊