sticky失效主因是祖先元素overflow:hidden/auto/scroll截断滚动上下文使其退化为static；需逐级检查computed面板overflow值，用clip-path:inset(0)替代或添加position:relative wrapper修复。
sticky元素突然不吸顶了，先查父级overflow
只要任意祖先元素设置了overflow: hidden、overflow: auto或overflow: scroll，且它不是sticky元素的最近定位上下文（即没设position: relative等），sticky就会直接退化为static——开发者工具里看到的position计算值就是static，而不是你写的sticky。
常见干扰源包括：.ant-layout-sider这类UI框架容器、弹窗内部的滚动区、甚至只是加了overflow: clip（Chrome 119+）的wrapper。用浏览器开发者工具的“Computed”面板逐层点开父节点，看overflow最终计算值是否为hidden或auto；临时删掉可疑样式，确认恢复后再决定如何保留功能。
父容器是flex/grid时，overflow和sticky会互相破坏
当sticky元素的直接父容器是display: flex或display: grid，且该容器又设置了overflow: hidden（哪怕只是为了撑高或清除浮动），sticky同样失效。这不是bug，而是规范行为：flex/grid容器本身不创建新的层叠上下文，但overflow属性会阻断sticky定位流的传播。
修复方法很简单：
- 给该flex/grid容器套一层div，内层设position: relative，sticky元素挂在这层下面
- 或者把overflow: hidden移到更外层，确保sticky元素的**直接父容器**既无overflow限制，也不带transform、filter等触发新层叠上下文的属性
- 注意align-items: center这类flex属性会让sticky元素视觉偏移，但top基准仍按原始文档流算，容易误判为“没吸顶”
想保留overflow又让sticky生效，别硬改z-index
z-index对sticky失效完全无效——它只控制层叠顺序，不解决定位机制被阻断的问题。真正起作用的是滚动上下文和包含块的连通性。
可行方案：
- 用clip-path: inset(0)替代overflow: hidden，它能实现视觉裁剪但不干扰sticky定位流（Safari对transform元素支持不稳定，慎用）
- 把sticky元素提到body下，用JS监听滚动并动态设置top和left，再配合position: fixed模拟效果（iOS Safari性能较差，需节流）
- 在React中用ReactDOM.createPortal、Vue中用<teleport></teleport>把元素挂到无overflow限制的全局容器里
transform会让sticky彻底失效，连top都失效
哪怕只是给父容器加了transform: translateZ(0)或opacity: 0.99，它也会创建新层叠上下文，导致sticky元素找不到有效的可滚动祖先，直接回退到static。这不是兼容性问题，是所有现代浏览器的统一行为。
检查重点：
- 父容器或任何上层祖先是否有transform、filter、will-change、opacity <br>
- 开发者工具中看该sticky元素的“Containing block”是否指向了意外的祖先<br>
- iOS Safari对sticky的渲染优化较弱，建议加兜底逻辑：滚动时检测位置，手动切到<code>position: fixed
实际项目里最容易被忽略的，是那些“看起来没加overflow但其实加了”的地方——比如某个CSS重置文件悄悄给html或body设了overflow: hidden，或者用了contain: layout间接影响滚动上下文。定位时别只盯着直接父级，往上查到body为止。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
