sticky 定位的一个坑
今天被一个布局问题卡住:侧栏的 position: sticky 怎么都不生效。
查了一圈,原因很经典:任何一个祖先元素设了 overflow: hidden(或 auto、scroll),sticky 就会失效,因为它需要一个能滚动的上下文。
排查清单
- sticky 元素本身要有
top(或 bottom 等)阈值 - 父链上没有非 visible 的 overflow
- 父元素高度要足够,不然没地方「粘」
记下来,下次少踩一次。
今天被一个布局问题卡住:侧栏的 position: sticky 怎么都不生效。
查了一圈,原因很经典:任何一个祖先元素设了 overflow: hidden(或 auto、scroll),sticky 就会失效,因为它需要一个能滚动的上下文。
top(或 bottom 等)阈值记下来,下次少踩一次。