sticky元素滚动时重叠，90%是因祖先元素overflow拦截导致失效退化为static；需用DevTools逐级检查overflow值，临时设visible验证，失效时top/z-index无效；绕过方案包括clip-path替代overflow或提升sticky元素层级。
sticky 元素在盒模型内滚动时出现“重叠”，90% 不是定位错了，而是它根本没真正 sticky 起来——失效了，退化成 static，下面的内容自然就顶上来了。
检查祖先元素是否用 overflow 拦截了 sticky 锚点
sticky 的锚点只认“最近的、可滚动的块级容器”。一旦某个祖先（不一定是父级，可能是爷爷级甚至更上层）设置了 overflow: hidden、overflow: auto 或 overflow: scroll，浏览器就会把它当作 sticky 的包含块边界。如果这个容器本身不可滚动（比如高度固定、内容没溢出），sticky 就直接失效，表现为“一滚就消失”或“和下面内容叠在一起”。
- 用 DevTools 选中 sticky 元素，逐级向上点 parentElement，看 Computed 面板里的
overflow值，重点查.card、.ant-modal、Tab 容器、Swiper 壳这类常被框架默认加overflow: hidden的组件 -
overflow: auto比hidden更难排查：它看似允许滚动，但若子内容没真撑高（比如被height: 100%压扁），浏览器会判定“不可滚动”，sticky 同样退化 - 临时验证：给疑似卡住的那层加
overflow: visible !important，如果 sticky 立刻恢复，问题就定位准了
为什么只调 top 和 z-index 无法解决重叠
当 sticky 失效退化为 static，它就只是个普通文档流元素，top 值被忽略，z-index 也无效（因为 position: static 下 z-index 不起作用）。此时看到的“重叠”，其实是静态布局下自然堆叠的结果，不是层叠顺序问题。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 别急着加
z-index: 999——先确认元素是不是真的处于 sticky 状态（滚动时看 DevTools 的 Computedposition是否变成sticky） -
top值再大也没用：失效状态下它不参与定位计算 - 常见误判：以为重叠是
z-index被 fixed 导航栏压住，实际是 sticky 根本没生效，fixed 元素只是“恰好盖住了那个静态位置”
保留 overflow 时的绕过方案
有些场景下 overflow: hidden 不能删（比如裁圆角、防卡片内容溢出），硬改会破坏 UI。这时得换思路，绕过包含块限制。
立即学习“前端免费学习笔记（深入）”；
- 优先用
clip-path: inset(0)替代overflow: hidden：视觉效果一致，但不创建新滚动上下文，对 sticky 完全无干扰 - 若必须用
overflow: auto（如弹窗内局部滚动表格），把 sticky 元素提一层：在外套一个position: relative的 wrapper，再把 sticky 元素放进去，让它脱离原滚动容器的包含块约束 - 避免用
height: 100vh作为 sticky 父容器高度——它会截断滚动范围；改用min-height: 100vh，确保容器能随内容自然伸展
真正棘手的从来不是 sticky 写法本身，而是它和 overflow、transform、opacity 这些属性的隐式交互——它们不动声色地创建新层叠上下文或包含块，让 sticky 在你没注意的地方悄悄失效。验证时别只盯样式面板，真机滚动暂停后看边缘有没有 1px 残影，那才是背景没封住 + 定位已失效的双重信号。
