css粘性定位的问题

Question

如图红黄绿三个box是同一行内的三个col，我给红框和绿框都设置了position: sticky;但是只有红色框是起效的，绿色框还是会随着滚动条滚动，并不会固定在顶部，请问这是什么原因呢？

这是对应的红框绿框布局代码

Answer 1

1. 父级元素不能有任何overflow:visible以外的overflow设置，否则没有粘滞效果。因为改变了滚动容器（即使没有出现滚动条）。因此，如果你的position:sticky无效，看看是不是某一个祖先元素设置了overflow:hidden，移除之即可。
2. 父级元素设置和粘性定位元素等高的固定的height高度值，或者高度计算值和粘性定位元素高度一样，也没有粘滞效果。