sticky布局(marksheng)

桃扇骨 2022-10-20 13:55 237阅读 0赞

position: sticky;
sticky的中文意思是“粘性的”,position:sticky表现也符合这个粘性的表现。特别适合导航的跟随定位效果。
基本上,可以看出是position:relative和position:fixed的结合体——当元素在屏幕内,表现为relative,就要滚出显示器屏幕的时候,表现为fixed。

特性
position:sticky有个非常重要的特性,那就是sticky元素效果完全受制于父级元素们。
这和position:fixed定位有着根本性的不同,fixed元素直抵页面根元素,其他父元素对其left/top定位无法限制。

sticky元素以下一些特性表现:
父级元素不能有任何overflow:visible以外的overflow设置,否则没有粘滞效果。
因为改变了滚动容器(即使没有出现滚动条)。
因此,如果你的position:sticky无效,看看是不是某一个祖先元素设置了overflow:hidden,移除之即可。

父级元素也不能设置固定的height高度值,否则也没有粘滞效果。
同一个父容器中的sticky元素,如果定位值相等,则会重叠;
如果属于不同父元素,则会鸠占鹊巢,挤开原来的元素,形成依次占位的效果。
sticky定位,不仅可以设置top,基于滚动容器上边缘定位;
还可以设置bottom,也就是相对底部粘滞。如果是水平滚动,也可以设置left和right值。

发表评论

表情:
评论列表 (有 0 条评论,237人围观)

还没有评论,来说两句吧...

相关阅读

    相关 sticky失效

    sticky失效 ![在这里插入图片描述][20210326105642894.gif] ![在这里插入图片描述][20210326105650490.png]

    相关 Sticky footer

    Sticky footer布局是什么? 我们所见到的大部分网站页面,都会把一个页面分为头部区块、内容区块和页脚区块,当头部区块和内容区块内容较少时,页脚能固定在屏幕的底部