position: sticky 在祖先元素设置 overflow: hidden/auto/scroll 时会被浏览器静默降级为 static，需通过 Computed 面板确认；排查时逐级检查祖先 overflow 值，可用 clip-path: inset(0) 或 position: relative 包裹替代，iOS Safari 需加 -webkit-sticky 前缀。
直接说结论：position: sticky 在父级（或任意祖先）设置了 overflow: hidden、overflow: auto 或 overflow: scroll 时，**不是“没生效”，而是被浏览器静默降级为 position: static**——你在 DevTools 的「Styles」里还能看到声明，但「Computed」面板里 position 的值已经是 static。
检查 computed position 是否已退化为 static
这是最快速的确认方式。很多开发者只看 Styles 面板里有没有写 position: sticky，却忽略浏览器实际执行的是什么：
- 选中 sticky 元素，在 DevTools 的「Computed」标签页里直接查
position的最终计算值 - 如果显示为
static，说明 sticky 已被禁用，问题一定出在祖先链上 - 此时再去看「Styles」面板里写的
top、z-index等，都已无意义——它根本没进入 sticky 流程
逐级排查祖先的 overflow 计算值
失效层往往不在直接父级，而可能藏在爷爷、曾祖父节点，甚至来自框架注入的隐藏样式：
- 在 Elements 面板中，从 sticky 元素开始，逐层点击左侧 DOM 树里的
parentElement，直到body - 每点一层，都在「Computed」里盯紧
overflow-x和overflow-y的值 - 重点标记值为
hidden、auto或scroll的节点，尤其注意那些height固定、内容明显没撑开的容器（比如height: 100vh的 wrapper） - 常见藏雷位置：
.ant-modal外层、.card根节点、Tab 切换容器、Swiper 壳、CSS-in-JS 动态加的内联overflow: hidden
不删 overflow:hidden 怎么让 sticky 继续工作
硬删会破 UI（圆角图片穿出、弹窗内容溢出），必须用兼容性好且零副作用的替代方案：
立即学习“前端免费学习笔记（深入）”；
- 用
clip-path: inset(0)替代overflow: hidden：视觉裁剪效果完全一致，但不创建新 BFC，也不干扰 sticky 的包含块链；注意别写成clip-path: inset(0px)，旧版 Safari 解析不稳定 - 给 sticky 元素加一层
position: relativewrapper：例如<div style="overflow: auto"><div style="position: relative"><div class="sticky"></div></div></div>，把 sticky 从滚动上下文边界里“提”出来 - Flex/Grid 容器下要额外小心：它们默认不生成稳定包含块，需加
min-height: 1px或显式height，并避免align-items: center或baseline
iOS Safari 下的额外陷阱
旧版 iOS Safari（15.4 及更早）压根不识别 position: sticky，只认带前缀的版本，而且顺序错就全失效：
- 必须写成：
position: -webkit-sticky;在前，position: sticky;在后 -
position: sticky; position: -webkit-sticky;这种写法会被 Safari 忽略整行 - 若用 PostCSS，确保
autoprefixer目标包含ios_saf >= 15.4；@supports (position: sticky)不可靠，改用 JS 检测：CSS.supports('position', 'sticky') || CSS.supports('position', '-webkit-sticky')
真正难的不是写对 top: 0，而是找到那个默默加了 overflow: hidden 却没人记得的祖先节点——它可能藏在 antd 源码里，也可能来自某行被遗忘的 CSS-in-JS 注入。
