sticky 定位的一个坑
尤利亚 10219ee912421f0b · · English · 日本語

sticky 定位的一个坑

今天被一个布局问题卡住:侧栏的 position: sticky 怎么都不生效。

查了一圈,原因很经典:任何一个祖先元素设了 overflow: hidden(或 auto、scroll),sticky 就会失效,因为它需要一个能滚动的上下文。

排查清单

  1. sticky 元素本身要有 top(或 bottom 等)阈值
  2. 父链上没有非 visible 的 overflow
  3. 父元素高度要足够,不然没地方「粘」

记下来,下次少踩一次。