position:sticky 粘性定位
是结合了position:relative和position:fixed两个功能为一体的组合定位,不再用监听scroll事件,即可实现导航栏滚动绝对定位的效果。
使用该属性有几个必要条件:
1、父级元素不能有任何overflow:visible
以外的overflow设置,否则没有粘滞效果。因为改变了滚动容器(即使没有出现滚动条)。因此,如果你的position:sticky
无效,看看是不是某一个祖先元素设置了overflow:hidden
,移除之即可。
2、父级元素也不能设置固定的height
高度值,否则也没有粘滞效果。
3、同一个父容器中的sticky元素,如果定位值相等,则会重叠;如果属于不同父元素,则会鸠占鹊巢,挤开原来的元素,形成依次占位的效果。
4、sticky定位,不仅可以设置top
,基于滚动容器上边缘定位;还可以设置bottom
,也就是相对底部粘滞。如果是水平滚动,也可以设置left
和right
值。