如图红黄绿三个box是同一行内的三个col,我给红框和绿框都设置了position: sticky;但是只有红色框是起效的,绿色框还是会随着滚动条滚动,并不会固定在顶部,请问这是什么原因呢?
这是对应的红框绿框布局代码
- 父级元素不能有任何
overflow:visible
以外的overflow设置,否则没有粘滞效果。因为改变了滚动容器(即使没有出现滚动条)。因此,如果你的position:sticky
无效,看看是不是某一个祖先元素设置了overflow:hidden
,移除之即可。 - 父级元素设置和粘性定位元素等高的固定的
height
高度值,或者高度计算值和粘性定位元素高度一样,也没有粘滞效果。