sticky,粘性定位

2022-07-27 01:09:11 字數 398 閱讀 8811

position:sticky,粘性定位;可以說是relative和fixed的結合;

滑動過程中,元素在顯示視窗內則在其本身的位置,超出元素所在位置則顯示在設定的sticky位置。

使用:#id ;

設定position:sticky,上下定位給乙個(top,bottom,right,left)之一即可;左右定位需要兩個值。

使用條件:

1、父元素不能overflow:hidden,overflow:auto,height:100%等屬性。

2、上下定位給乙個(top,bottom,right,left)之一即可;左右定位需要兩個值,如(top:0;right:0;)。

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

4、sticky元素僅在其父元素內生效。

css粘性定位sticky的使用

在做h5頁面的過程中,經常會遇到這種情況,頁面滾動到一定位置的時候,那個元素需要固定在頂部,之前都是用js去計算再實現,其實用css來實現更加方便 html div p 粘性定位 p div css div p 頁面滾動到div的位置的時候,p元素就會浮動固定在頂部,超出div就不浮動了。實際專案中...

sticky 粘性布局

position sticky sticky的中文意思是 粘性的 position sticky表現也符合這個粘性的表現。特別適合導航的跟隨定位效果。基本上,可以看出是position relative和position fixed的結合體 當元素在螢幕內,表現為relative,就要滾出顯示器螢幕...

css屬性sticky(粘性定位)固定導航

sticky 粘性定位 解釋 粘性定位可以被認為是相對定位和固定定位的混合。元素在跨越特定閾值前為相對定位,之後為固定定位。設定該屬性的元素並不脫離文件流,仍然保留元素原本在文件流中的位置。使用sticky實現固定導航頭部在以前,我們實現的主要思路就是使用js監聽頁面滾動事件,然後判斷導航距離頂部的...