CSS位置屬性

如何使用positionCSS中的屬性

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

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

在這篇文章中,我還將根據元素之間的差異如何查看頁面上的事物變化。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; }

結果如下:

您可以嘗試添加我之前提到的任何屬性(toprightbottomleft) 到.box,什麼也不會發生。該職位是static

現在,如果我們設置position: relative首先,顯然沒有任何變化。但是元素現在可以使用toprightbottomleft屬性,現在您可以相對於包含它的元素更改它的位置。

例如:

.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;
}

現在,我們可以使用toprightbottomleft特性:

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

或者

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

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

這意味著如果我們添加position: relative.child元素,然後我們設置topleft設置為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手冊


更多CSS教程: