久久无码中文字幕_日韩精品无码一本二本三_久久精品呦女暗网_欧美一级夜夜爽_久久精品国产99久久99久久久

07
2023/07

粘性定位(sticky)詳解

發(fā)布時間:2023-07-07 18:00:22
發(fā)布者:MaiMai
瀏覽量:
0

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定位,剛進入頁面的時候,他會保持相對定位,如圖所示:

sticky定位

而當(dāng)我們向下滾動頁面時,他又會固定在頁面上方:

sticky定位

有時會出現(xiàn)設(shè)置粘性定位不起作用的情況,需要注意幾點:

1、父元素不能設(shè)置overflow:hidden或overflow:auto屬性

2、元素定位表現(xiàn)為在跨越特定閾值前為相對定位,之后為固定定位。即必須指定 top, right, bottom 或 left 四個閾值之一才可使粘性定位生效。否則只會處于相對定位。

3、父元素的高度不能低于sticky元素的高度

4、sticky元素僅在其父元素內(nèi)生效


關(guān)鍵詞:
返回列表