聊聊css position屬性及其sticky屬性值的特性(吸頂特效)

本文收納於： 從零開始的大前端築基之旅(深刻淺出，持續更新～)

CSS position屬性用於指定一個元素在文檔中的定位方式。top，right，bottom 和 left 屬性則決定了該元素的最終位置。

例如：

.element {
  position: relative;
  top: 50px;
  left: 50px;
}
複製代碼

取值

static

該關鍵字指定元素使用正常的佈局行爲，即元素在文檔常規流中當前的佈局位置。此時 top, right, bottom, left 和 z-index 屬性無效。

relative

該關鍵字下，元素先放置在未添加定位時的位置，再在不改變頁面佈局的前提下調整元素位置（所以會在此元素未添加定位時所在位置留下空白）。

position:relative 對 table-*-group, table-row, table-column, table-cell, table-caption 元素無效。

如上圖所示，雖然第一個方塊由於relative移動了位置，但並未影響頁面本來佈局。

absolute

元素會被移出正常文檔流，並不爲元素預留空間，經過指定元素相對於最近的非 static 定位祖先元素的偏移，來肯定元素位置。絕對定位的元素能夠設置外邊距（margins），且不會與其餘邊距合併。

此時，藍色框的父元素設置爲 position: relative，用來限定子元素絕對定位的位置，child element 設置爲 top: 80px, left: 50px

fixed

元素會被移出正常文檔流，並不爲元素預留空間，而是經過指定元素相對於屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。打印時，元素會出如今的每頁的固定位置。fixed 屬性會建立新的層疊上下文。

當元素祖先的 transform, perspective 或 filter 屬性非 none 時，容器由視口改成該祖先。

sticky

元素根據正常文檔流進行定位，而後相對它的_最近滾動祖先（nearest scrolling ancestor）_和 containing block (最近塊級祖先 nearest block-level ancestor)，包括table-related元素，基於top, right, bottom, 和 left的值進行偏移。偏移值不會影響任何其餘元素的位置。該值老是建立一個新的層疊上下文（stacking context。

注意，一個sticky元素會「固定」在離它最近的一個擁有「滾動機制」的祖先上（當該祖先的overflow 是 hidden, scroll, auto, 或 overlay時），即使這個祖先不是真的滾動祖先。

sticky詳解

粘性定位能夠被認爲是相對定位和固定定位的混合。當元素在屏幕或滾動元素顯示區域時，表現爲relative，就要滾出顯示器屏幕的時候，表現爲fixed。

能夠滾動下面這個框感覺下交互表現

A

Andrew W.K.

Apparat

Arcade Fire

At The Drive-In

Aziz Ansari

C

Chromeo

Common

Converge

Crystal Castles

Cursive

E

Explosions In The Sky

T

Ted Leo & The Pharmacists

T-Pain

Thrice

TV On The Radio

Two Gallants

其中，標示A被設置爲：

{
    position: sticky;
    top: 10px;
  }
複製代碼

隨着頁面的滾動，當標示A距離上邊緣10px距離的時候，黏在了上邊緣，表現如同position:fixed。

sticky和fixed定位有着根本性的不一樣，fixed元素直抵頁面根元素，其餘父元素對其left/top定位沒法限制。而sticky元素效果徹底受制於父級元素。

層次滾動吸頂

仍是上面的栗子，我在每一個標題組上加了紅色或藍色的邊框，這些邊框就是標示A、C、E、T的父元素邊框，能夠很明顯的看到，粘性定位的元素在移動到父元素的底部時，就不會再保持吸頂，而是隨着父元素移出顯示區域。

所以能夠推出一些特性：

1. 父級元素設置和粘性定位元素等高的固定的height高度值，或者高度計算值和粘性定位元素高度同樣，不會粘滯效果。
2. 同一個父容器中的sticky元素，若是定位值相等，則會重疊；
3. 若是屬於不一樣父元素，且這些父元素正好緊密相連，則會鳩佔鵲巢，擠開原來的元素，造成依次佔位的效果。

因爲每個標示組，屬於不一樣的父元素，所以，滾動的時候，後面的標題才能把前面已經sticky定位的標題推開，造成層次滾動吸頂效果。這是sticky定位自然的特性，無需任何JavaScript的幫助。

若是全部的標題頭都在同一個父元素下，就會致使全部sticky定位的新聞標題都會重疊在一塊兒。

仍是不理解粘性定位規則的花建議看一下參考文檔1。

附上瀏覽器支持：

若是你收穫了新知識，或者收穫了左側精美圖片，請點個贊吧～

參考文檔：

1. 深刻理解position sticky粘性定位的計算規則
2. position | MDN
3. 殺了個回馬槍，仍是說說position:sticky吧