absolute 與 fixed 共同點(diǎn)與不同點(diǎn)和對(duì) sticky 定位的理解

absolute 與 fixed 共同點(diǎn)與不同點(diǎn)

共同點(diǎn)：

• 改變行內(nèi)元素的呈現(xiàn)方式，將 display 置為 inline-block

• 使元素脫離普通文檔流，不再占據(jù)文檔物理空間

• 覆蓋非定位文檔元素

不同點(diǎn)：

• abuselute 與 fixed 的根元素不同，abuselute 的根元素可以設(shè)置，fixed 根元素是瀏覽器。

• 在有滾動(dòng)條的頁(yè)面中，absolute 會(huì)跟著父元素進(jìn)行移動(dòng)，fixed 固定在頁(yè)面的具體位置。

對(duì) sticky 定位的理解

sticky 英文字面意思是粘貼，所以可以把它稱(chēng)之為粘性定位。語(yǔ)法：position: sticky; 基于用戶(hù)的滾動(dòng)位置來(lái)定位。

粘性定位的元素是依賴(lài)于用戶(hù)的滾動(dòng)，在 position:relative 與 position:fixed 定位之間切換。它的行為就像 position:relative; 而當(dāng)頁(yè)面滾動(dòng)超出目標(biāo)區(qū)域時(shí)，它的表現(xiàn)就像 position:fixed;，它會(huì)固定在目標(biāo)位置。元素定位表現(xiàn)為在跨越特定閾值前為相對(duì)定位，之后為固定定位。這個(gè)特定閾值指的是 top, right, bottom 或 left 之一，換言之，指定 top, right, bottom 或 left 四個(gè)閾值其中之一，才可使粘性定位生效。否則其行為與相對(duì)定位相同。