sticky定位在overflow非visible的祖先上会降级为static，因规范要求其不参与计算；需逐级检查computed中overflow值，用clip-path替代overflow: hidden可保sticky正常。
sticky 定位在设置了 overflow: hidden、overflow: auto 或 overflow: scroll 的祖先元素上失效，不是 bug，是浏览器严格按规范执行的结果：它直接把 position: sticky 降级为 position: static，连尝试粘住的机会都不给。
DevTools 里看到 position: static 就是铁证
只要任意一层祖先（哪怕离得很远）设置了上述 overflow 值，且该祖先**没设 position: relative 等定位属性**，sticky 就会被“锁死”——Computed 面板中 position 永远显示 static，不是样式没加载，是根本没进入 sticky 计算流程。
- 常见藏匿点：
.ant-modal外层 wrapper、.card根节点、Tab 面板容器、Swiper 轮播壳，甚至 CSS-in-JS 运行时注入的内联样式 - 验证方法：选中 sticky 元素 → 打开「Computed」面板 → 逐级点击左侧 DOM 树中的 parentElement，盯紧每层的
overflow-x和overflow-y计算值 - 临时救急：给可疑父级加
!overflow-visible或overflow: visible !important，如果 sticky 立刻恢复，问题就坐实了
overflow: auto/scroll 会让 sticky “卡在半路”
overflow: auto 看似能滚动，但 sticky 元素会被强制锚定在这个局部容器内部，而不是整个页面视口。结果就是：只在那个区域里“粘”，一旦超出容器边界，立刻掉回文档流。
- 典型现象：
.sidebar设了top: 0，却被包在overflow: auto的父容器里，它只能粘在.sidebar内部顶部，而非页面左侧 - 关键判断：用鼠标滚轮直接对该容器滚动，看是否响应；不响应，说明它根本没形成有效滚动上下文
- 检查实际高度：用 DevTools Layout 面板看 “Actual height” 是否 > 设定高度；若没溢出，sticky 就不会触发
不能删 overflow: hidden 怎么保住 sticky
业务上常需要 overflow: hidden 来裁剪圆角、防弹窗穿出、保动画边界，硬删会破 UI。绕过限制比硬改更稳妥：
- 优先用
clip-path: inset(0)替代overflow: hidden：视觉裁剪效果一致，但不创建新 BFC、不干扰滚动上下文，sticky 行为 100% 保留（Chrome 93+、Firefox 97+、Safari 15.4+ 支持） - 若必须保留
overflow: auto（如弹窗内局部滚动表格），给 sticky 元素套一层position: relativewrapper：<div style="overflow: auto"> <div style="position: relative"> <div class="sticky"></div> </div> </div> - 极端情况（DOM 锁死、无法加 wrapper）可用
position: fixed+getBoundingClientRect()监听scroll模拟，但 iOS Safari 滚动抖动和节流需额外处理
Flex/Grid 父容器没高度也会让 sticky 白搭
Flex 或 Grid 容器若没显式设置 height、max-height 或 min-height，即使子内容撑高了，浏览器也可能无法识别出“可滚动区域”，导致 sticky 找不到锚定参考系。
- 常见错误：父容器是
display: flex; flex-direction: column，子项用了flex: 1，但父级没给任何高度约束 - 验证方式：在 DevTools 的 Layout 面板中看该父容器的 “Layout Bounds” 是否有明确高度范围
- 修复建议：把
height: 100vh换成min-height: 100vh；避免display: contents或浮动脱离文档流；Safari 更敏感，建议用min-h-[400px]而非h-[400px]
最常被忽略的一点：失效层级往往不在直接父级，而在爷爷级甚至更高层；而 clip-path: inset(0) 是目前兼容性最好、侵入性最小的替代方案，别只盯着删 overflow —— 那通常不是解法，是倒退。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
