sticky元素computed position是static，因祖先元素overflow:hidden/auto/scroll或height:100vh等设置导致浏览器静默降级，需用clip-path:inset(0)替代overflow:hidden或改height为min-height修复。
sticky元素computed position是static？先查祖先overflow值
只要任意祖先元素设置了overflow: hidden、overflow: auto或overflow: scroll，且该容器本身不滚动（比如高度固定、内容未溢出），浏览器就会静默把position: sticky降级为static——你看到的“不动”，不是卡住，是压根没启动。
用DevTools选中sticky元素，逐级点开parentElement直到body，挨个看Computed面板里的overflow-x和overflow-y：
- 重点盯防：
.ant-modal外层wrapper、.card根节点、Tab切换容器、Swiper壳、甚至CSS-in-JS注入的隐藏样式 - 临时验证：给某层父级加
overflow: visible !important，如果sticky立刻恢复，问题就坐实了
必须保留overflow: hidden怎么办？用clip-path: inset(0)替代
overflow: hidden常用于裁剪圆角图片、防止弹窗内容穿出、避免动画溢出，不能硬删。但clip-path: inset(0)能实现完全一致的视觉裁剪效果，且不创建新包含块、不切断滚动上下文、对sticky零干扰。
替换写法：overflow: hidden → clip-path: inset(0)
兼容性：Chrome 55+、Firefox 54+、Safari 15.4+、Edge 79+，2026年已全覆盖
注意：clip-path不支持IE，如需兼容IE，只能重构DOM结构或改用JS模拟
父容器用了height: 100vh？换成min-height: 100vh
height: 100vh会硬性截断滚动范围，导致sticky在内容撑高后突然失效；min-height: 100vh既保证初始视口高度，又允许容器随长列表自然伸展，维持完整的粘性作用域。
常见错误场景：
- Grid/Flex布局中，
.page设了height: 100vh，但.main里塞了几十条.item - 滚动到第2屏时，
.header直接掉回文档流，Computed中position变回static
修复只需一行：height: 100vh → min-height: 100vh
Flex/Grid父容器里sticky不工作？补高度+禁inline
Flex或Grid容器本身不自动产生滚动上下文。当sticky元素直接放在display: flex或grid子级时，若父容器没设高度约束、或用了align-items: center等对齐方式，sticky的“进入视口”判断就会失准；更糟的是，inline-flex或inline-grid父级根本不产生块格式化上下文（BFC），sticky直接被忽略。
实操要点：
- 给父容器显式加
height或max-height+overflow-y: auto - 避免
display: inline-flex或display: inline-grid作为sticky直接父级 - Flex容器务必声明
flex-direction: column，否则主轴方向不对，滚动空间不成立
真正容易被忽略的是：sticky不是独立生效的定位方式，它依赖整个祖先链上所有容器是否“愿意交出滚动权”。哪怕只有一层overflow: hidden或一个height: 100vh，整条链就断了——而DevTools里position: sticky样式明明还在，Computed却显示static，这种静默降级最消耗排查时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
