CSS position sticky 不生效时先检查哪个滚动容器

sticky 不生效的第一优先级排查项：查看当前 sticky 元素的所有上级祖先元素，是否有任意一个设置了 overflow 属性值为 hidden、scroll 或者 auto，且这个元素的高度没有被内容完全撑开，会创建独立的滚动上下文阻断 sticky 的默认视口吸附逻辑。

先找出 sticky 真正参考的滚动容器

可以把排查范围限定在 sticky 元素的祖先链。MDN 对 sticky 的定义是：元素先按普通流布局，再相对最近的滚动祖先和包含块偏移；其中最近的滚动祖先只要形成了 scrolling mechanism 就会参与参照。因此，下面的 .shell 即使没有出现独立滚动条，也可能截走 sticky 的参照关系：

.shell {
  /* hidden 也会建立滚动机制，可能改变 sticky 的参照祖先 */
  overflow: hidden;
}

.content {
  /* 页面真正出现滚动条的区域不一定是 sticky 参照区域 */
  min-height: 100vh;
}

.toc {
  /* 纵向吸附需要一个明确的顶部阈值 */
  position: sticky;
  top: 16px;
}

调试时从 .toc 向上逐层查看计算后的 overflow、overflow-x 和 overflow-y。重点不是寻找“哪个元素有滚动条”，而是确认第一个会建立滚动机制的祖先，以及它是否拥有足够的滚动内容。

用 top 和可滚动空间确认最小条件

纵向 sticky 最小配方可以很短，但三个条件缺一不可：祖先有明确的滚动空间，元素在正常文档流中，且纵轴设置了非 auto 的阈值。示例中的 .pane 才是可滚动容器，.side 会在它的内容滚动到 top: 12px 时停住：

  
较长的正文内容

.pane {
  /* 固定可视高度并开启纵向滚动，提供吸附边界 */
  height: 420px;
  overflow-y: auto;
}

.side {
  /* top 是纵向 sticky 的触发阈值，不要省略 */
  position: sticky;
  top: 12px;
  align-self: flex-start;
}

.article {
  /* 让主内容产生超过 pane 高度的滚动区域 */
  min-height: 900px;
}

如果把 top 删除，元素仍可能保持 position: sticky 的计算值，但在这个轴上没有可见的吸附阈值；如果 .pane 的内容没有超过自身高度，也没有滚动距离可以观察。

父级高度和 flex 布局是最常见的第二层陷阱

滚动容器正确后，再检查空间是否真的留给 sticky。一个高频问题是 sticky 元素的高度已经接近父容器高度，吸附后没有可移动范围。另一个问题出现在 flex 或 grid 中：默认拉伸可能让侧栏与内容等高，视觉上像是 sticky 没有工作。

.layout {
  /* 两列布局本身不负责制造滚动，滚动要交给明确的 pane */
  display: flex;
  align-items: flex-start;
}

.side {
  /* 防止 flex 交叉轴拉伸，给 sticky 留出可移动空间 */
  align-self: flex-start;
  height: max-content;
}

.pane {
  /* 只在确实需要时声明 overflow，避免无意截走参照关系 */
  overflow-y: auto;
}

还要区分轴：横向设置了 overflow-x: auto，并不等于纵向 sticky 已经获得正确的滚动条件；同时设置多个方向的 overflow 时，要确认滚动发生在与 top 对应的纵轴上。不要先用 z-index、transform 或负 margin 掩盖参照容器问题。

按四项清单收尾，避免反复试错

修复顺序建议保持稳定：先移除无意的 overflow，再明确真正的滚动容器，补齐同轴 inset，最后处理 flex/grid 的对齐和高度。这样每次只改变一个约束，浏览器开发者工具里的布局变化也更容易解释。

常见问题

为什么设置了 z-index 仍然不吸附？

z-index 只影响层叠顺序，不会创建滚动距离，也不会改变 sticky 的参照祖先。先查 overflow 和 top。

父级用了 overflow: hidden 一定会失效吗？

不一定，但它会建立滚动机制并可能成为 sticky 的最近参照祖先。若它不是预期容器，删除或调整这条声明通常更直接。

sticky 能不能不写 top？

可以写出合法 CSS，但在纵轴上没有非 auto 的 inset 时，sticky 的可见效果会接近 relative，因此实际吸附通常需要 top 或逻辑属性。