position:sticky生效的必要条件

position:sticky 粘性定位

是结合了position:relative和position:fixed两个功能为一体的组合定位,不再用监听scroll事件,即可实现导航栏滚动绝对定位的效果。

使用该属性有几个必要条件:

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

2、父级元素也不能设置固定的height高度值,否则也没有粘滞效果。

3、同一个父容器中的sticky元素,如果定位值相等,则会重叠;如果属于不同父元素,则会鸠占鹊巢,挤开原来的元素,形成依次占位的效果。

4、sticky定位,不仅可以设置top,基于滚动容器上边缘定位;还可以设置bottom,也就是相对底部粘滞。如果是水平滚动,也可以设置leftright值。

你可能感兴趣的:(position:sticky生效的必要条件)