position: sticky 失效主因是祖先元素 overflow: hidden/auto/scroll 创建新滚动上下文，使 sticky 锚定失败；可通过 devtools 检查 computed position 是否为 static，用 clip-path: inset(0) 替代 overflow 或提升元素层级修复。
position: sticky 不生效，八成不是你漏写了 top，而是浏览器根本没把它当 sticky 处理——计算后的 position 值是 static。
为什么 computed position 是 static？
sticky 元素必须锚定在一个「可滚动的包含块」上才能激活。只要最近的祖先元素满足以下任一条件，浏览器就会切断粘性链，强制降级为 static：
-
overflow: hidden、overflow: auto或overflow: scroll（哪怕没滚动条） -
height: 100vh这类固定高度声明（容器无法随内容撑高，滚动上下文被截断） - 父容器因
float或未清除浮动导致高度塌陷，实际高度为 0 - 父容器用了
transform、filter或will-change -
display为table-row、inline或某些旧版 Safari 下的flex
怎么快速定位失效源头？
打开 DevTools，选中 sticky 元素 → 切到「Computed」面板 → 查看 position 的最终值。如果是 static，就说明它已被降级。接着：
- 逐级点击左侧 DOM 树中的父节点，盯紧每层的
overflow-x和overflow-y计算值 - 特别注意那些动态注入的 wrapper（如
.ant-modal、.swiper-wrapper、Tab 切换容器） - 用 Layout 面板看父容器的「Actual height」是否真大于设定高度（比如
height: 100vh但内容远超视口） - 临时加
overflow: visible !important到可疑父节点，如果 sticky 立刻恢复，问题就坐实了
不删 overflow: hidden 怎么救 sticky？
业务常需 overflow: hidden 裁剪图片、约束弹窗或配合动画，硬删不现实。稳妥替代方案：
- 用
clip-path: inset(0)替代overflow: hidden：视觉效果一致，但不创建新 BFC，sticky 链完整（Chrome 93+、Firefox 97+、Safari 15.4+ 支持） - 把 sticky 元素提一层：在带
overflow的容器外套个position: relativewrapper，再把元素挂进去 - 若父容器是
height: 100vh，直接改成min-height: 100vh，允许内容自然撑高 - 遇到浮动塌陷，优先用
display: flex替代float，比clear: both更干净
哪些场景最容易踩坑？
真实项目里最藏雷的位置往往不是你自己写的 CSS，而是第三方组件或框架默认注入的样式：
-
.ant-modal-content默认有overflow: hidden -
.card类常带overflow: hidden配合圆角裁剪 - Swiper 的
.swiper-wrapper内部设了overflow: hidden - CSS-in-JS 库（如 Emotion）可能在 runtime 动态插入带
overflow: hidden的内联 style
这些地方不会报错，也不会在源码里显眼标注，但会静默杀死 sticky。检查时得往深里挖，别只盯着自己写的那几行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
