CSS sticky 不生效排查清单：从 top、overflow 到滚动容器逐层定位

写后台表格、文档侧边栏或详情页目录时，position: sticky 是最省代码的吸顶方案。但很多页面里明明写了 position: sticky; top: 16px;，元素还是跟着内容一起滚走，看起来和 relative 没区别。

这类问题不要一上来改成 fixed。sticky 是否生效，通常由元素自身样式、父级溢出规则、滚动容器和高度边界共同决定。下面按调试检查清单走一遍，目标是找到明确证据，再做最小改动。

现象：sticky 写了却像 relative 一样滚走

先固定问题现场。假设右侧详情区域里有一个目录，本来希望它在滚动到顶部后停在视口 16px 的位置，但实际表现是目录随页面一起上移，甚至完全离开屏幕。

.layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
}

.toc-panel {
  position: sticky;
  top: 16px;
}

这段 CSS 本身没有明显错误。真正的问题经常藏在外层容器里，比如某个父级为了裁剪阴影写了 overflow: hidden，或者滚动发生在内部容器而不是浏览器视口。

第一步只确认三件事：元素有没有 top，父级链路有没有非默认 overflow，页面实际滚动的是哪个容器。确认完这三点，后面的修复就不会靠猜。

分层检查：先看元素，再看父级链路

sticky 是一种相对定位和固定定位之间的状态切换。它不是永远贴在视口顶部，而是在自己的滚动边界内达到阈值后才吸住。因此排查顺序要从近到远。

1. 检查元素自身是否具备吸顶条件

先在浏览器开发者工具里选中目标元素，看最终生效样式，而不是只看源码文件。

.toc-panel {
  position: sticky;
  top: 16px;
  align-self: start;
}

这里重点看两点：position 是否真的变成 sticky，以及 top 是否存在。没有 top、bottom、left 或 right 这类阈值时，sticky 没有进入吸附状态的触发线。

2. 检查父级链路的 overflow

sticky 会受最近的滚动祖先影响。任何父级设置了 overflow: hidden、auto、scroll 或 clip，都可能改变它的吸附边界。

function printOverflowChain(selector) {
  const el = document.querySelector(selector);
  for (let p = el.parentElement; p; p = p.parentElement) {
    const style = getComputedStyle(p);
    console.log(p.className || p.tagName, style.overflow, style.overflowY);
  }
}

printOverflowChain('.toc-panel');

如果输出里看到某个外层卡片是 overflow: hidden，并且它的高度刚好包住内容，那么 sticky 只能在这个很小的边界内工作。视觉上就像完全没生效。

3. 检查实际滚动容器

很多后台页面会把主内容放在 .main-scroll 里滚动，浏览器窗口本身不动。此时 sticky 的参照对象不是你以为的视口，而是内部滚动容器。

.page {
  height: 100vh;
  overflow: hidden;
}

.main-scroll {
  height: 100%;
  overflow-y: auto;
}

如果目录不在 .main-scroll 内，或者它的父级高度没有覆盖滚动区域，就会出现吸顶位置不对、过早结束、滚动中突然跳走等现象。

证据判断：每个结果对应什么结论

排查时不要只记录“改了有用”。更可靠的方式是把每条证据对应到一个结论。

修复动作：让 sticky 找到正确的滚动边界

修复时优先保留 sticky，而不是直接换成 fixed。fixed 会脱离原布局，后续还要处理遮挡、宽度和响应式问题。sticky 的优势是仍然在文档流里，只要边界正确，维护成本更低。

修复 1：保留 top，并避免被其他规则覆盖

.toc-panel {
  position: sticky;
  top: 16px;
  align-self: start;
  z-index: 2;
}

如果目标元素在 grid 或 flex 布局里，align-self: start 可以避免它被默认拉伸到整列高度，导致吸顶状态看不出来。

修复 2：拆掉不必要的 overflow hidden

.content-card {
  border-radius: 8px;
  /* 如果只是为了裁剪背景或阴影，优先把裁剪放到内部元素 */
  overflow: visible;
}

.content-card__inner {
  overflow: hidden;
  border-radius: inherit;
}

常见做法是把卡片外层留给布局和 sticky 边界，把真正需要裁剪的视觉层放到内部。这样既保留圆角裁剪，又不阻断 sticky 的滚动参照。

修复 3：让 sticky 和滚动内容处于同一个滚动容器

...

.main-scroll {
  height: 100vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
}

如果页面就是内部滚动，目录也要和正文在同一个滚动上下文内。否则目录看到的是一个边界，正文滚动的是另一个边界。

反向验证：确认不是碰巧恢复

修完之后至少做三组反向验证，避免只在当前屏幕尺寸下看起来正常。

• 把页面滚动到顶部、中段和底部，观察目录是否在到达父级底部前稳定吸顶。
• 切换窄屏或缩小浏览器窗口，确认目录列折叠后不会遮挡正文。
• 临时把父级 overflow: hidden 加回来，如果问题复现，说明定位方向正确。

还可以用开发者工具观察元素位置：滚动时 top 附近应保持稳定，直到它接近父级容器底部。如果它一开始就离开屏幕，继续查滚动容器；如果它在很短距离后停止，继续查父级高度。

最终清单：下次直接按表排查

以后遇到 sticky 不生效，可以按下面顺序处理：

1. 确认目标元素最终样式里有 position: sticky 和有效的 top。
2. 沿父级链路查 overflow，重点看 hidden、auto、scroll、clip。
3. 确认页面到底是浏览器视口滚动，还是内部容器滚动。
4. 检查父级高度和布局拉伸，必要时给 sticky 元素加 align-self: start。
5. 只改一处后滚动验证，记录哪个证据让问题复现或恢复。

总结一下，sticky 失效大多数不是浏览器不支持，而是边界不符合预期。把元素自身、父级溢出、滚动容器和高度边界分层检查，基本就能从“玄学吸顶”变成可复现、可修复的布局问题。