sticky定位(粘性定位),指的是基于用戶的滾動位置來定位。不同于前四個定位,他有點像relative和fixed的結(jié)合:當(dāng)定位基點是自身默認(rèn)位置時,他呈現(xiàn)為relative定位,而當(dāng)頁面滾動區(qū)域大于你的目標(biāo)區(qū)域時,他則表現(xiàn)為fixed定位,可以固定在頁面的某個位置。
粘性定位特點:
1.以瀏覽器的可視窗口為參照點移動元素(固定定位特點)
2.粘性定位占有原先的位置(相對定位特點)
3.必須添加 top 、left、right、bottom 其中一個才有效
如圖,我們給頂部nav欄加上sticky定位,剛進入頁面的時候,他會保持相對定位,如圖所示:
而當(dāng)我們向下滾動頁面時,他又會固定在頁面上方:
有時會出現(xiàn)設(shè)置粘性定位不起作用的情況,需要注意幾點:
1、父元素不能設(shè)置overflow:hidden或overflow:auto屬性
2、元素定位表現(xiàn)為在跨越特定閾值前為相對定位,之后為固定定位。即必須指定 top, right, bottom 或 left 四個閾值之一才可使粘性定位生效。否則只會處于相對定位。
3、父元素的高度不能低于sticky元素的高度
4、sticky元素僅在其父元素內(nèi)生效
上一篇: 移動端適配
關(guān)鍵詞: