CSS sticky 不生效怎么检查父容器 overflow

给侧栏加了 position: sticky 却一直跟着页面走，先别急着改 z-index。最常见的原因是某个父容器设置了 overflow，它成了 sticky 的滚动参照，但自身没有足够的滚动空间；另一个高频原因是没有设置 top。排查时从 sticky 元素向上逐层看 Computed 样式，找到第一个产生滚动机制的祖先，再决定移除它还是让它真正承担滚动。

结论：sticky 不是“相对视口固定”。父级的 overflow: hidden/auto/scroll/overlay 可能改变它的粘附参照；同时必须给垂直轴设置非 auto 的 top 或等价 inset，父容器还要有可用的高度差。

先判断 sticky 到底在跟谁滚动

MDN 对 sticky 的定义是：元素先按普通文档流布局，达到阈值后相对最近的滚动祖先和包含块偏移。这里的“最近”很关键，它不一定是正在发生滚动的那个节点。祖先只要通过 overflow 建立了滚动机制，就可能被选为参照。

可以先用这张关系图建立判断顺序：视口里有页面滚动，卡片内部还有一个设置了 overflow 的包裹层；如果包裹层没有内容溢出，标题没有可粘附的滚动区间，向下滚页面时自然像普通元素一样离开视口。

在开发者工具里选中标题，逐级查看祖先的 overflow、overflow-x、overflow-y。不要只看源码里的规则，优先看 Computed 值，因为组件库可能在更高优先级处覆盖它。垂直粘附还要确认：

父容器 overflow 为什么会让它像失效

下面这个最小结构里，.panel 的 overflow: hidden 不是装饰属性。它会让 .panel 参与滚动机制判断；但面板没有固定高度，也没有形成有效的垂直溢出，标题就没有可利用的滚动区间。

  
订单明细
  
...很长的列表...

.panel {
  /* 横向裁剪是需求时再保留，避免无意改变 sticky 的参照 */
  overflow-x: hidden;
  overflow-y: visible;
}

.title {
  /* 垂直 sticky 必须有非 auto 的阈值 */
  position: sticky;
  top: 12px;
  z-index: 2; /* 只处理遮挡，不负责建立滚动关系 */
}

如果业务确实需要内层滚动，应让它成为清晰的滚动区域，而不是同时依赖外层页面滚动：

.panel {
  /* 内层滚动区域要有高度差，标题才有粘附区间 */
  max-height: 28rem;
  overflow-y: auto;
  overflow-x: hidden;
}

.title {
  /* 标题跟随 panel 的垂直滚动 */
  position: sticky;
  top: 0;
  background: white; /* 防止内容从标题下方透出 */
}

按这份清单修复，不要先改 z-index

1. 确认偏移：垂直 sticky 先写 top；横向粘附则检查 left 或逻辑属性。
2. 定位边界：暂时在每层祖先上加不同颜色的 outline，并查看谁的 overflow 不是 visible。
3. 选择方案：不需要内层滚动就移除无意的 overflow: hidden；需要内层滚动就给容器明确高度，并让标题放在该容器的直接布局范围内。
4. 检查布局：Flex 或 Grid 子项常见高度约束会让滚动区域没有空间，可检查父级的 align-items、min-height 和实际计算高度。

修复后先滚动预期的容器，再滚动页面。两者都需要测试，因为同一组件在桌面端可能随页面滚动，在移动端又被横向滚动包装层改变参照。只有当滚动边界、偏移阈值和父级高度同时成立，sticky 才会稳定地停在预期位置。

常见问题

只写 position: sticky 不写 top 可以吗？

垂直方向通常不行。没有非 auto 的 top 或等价 inset 时，该轴上的 sticky 会表现得像 relative。

overflow: hidden 一定会让 sticky 失效吗？

不一定，但它可能成为滚动机制参照。真正的问题是它是否截断了可用滚动空间，或让元素绑定到错误的祖先；应结合容器高度和实际滚动对象判断。

加 z-index 后为什么仍然不吸附？

z-index 只影响层叠顺序，不能补上 top、滚动距离或正确的父级边界。先修复滚动关系，再处理遮挡。

参考：MDN position CSS property。