computed position 为 static 表明 sticky 被静默降级；主因是任意祖先的 overflow-x/y 为 hidden/auto/scroll 且自身不可滚动，或父容器为 flex/grid 未设高度约束，或 Safari 未正确书写 -webkit-sticky 前缀。
直接看 computed position 值——如果是 static，说明 sticky 已被浏览器静默降级，不是没写对，是根本没启动。
为什么 computed position 是 static？
只要 sticky 元素任意祖先（哪怕隔了 3 层）的 overflow-x 或 overflow-y 计算值是 hidden、auto 或 scroll，且该祖先自身不可滚动（比如高度刚好、内容未溢出），规范就强制将其降级为 static。你写的 position: sticky 仍显示在 Styles 面板里，但 Computed 面板里已经是 static —— 这不是渲染延迟，是解析阶段就决定的。
常见藏雷位置包括：.ant-modal 外层 wrapper、.van-card、Tab 切换容器、Swiper 根节点、CSS-in-JS 动态注入的内联样式。别只查直接父级，得一路点到 html 或 body。
- 临时验证：在 DevTools 中给某层祖先加
overflow: visible !important，如果 sticky 立刻恢复，问题就坐实了 - 注意
transform、filter、will-change也会创建新层叠上下文，间接切断粘性链 - 用 Layout 面板确认该祖先的 “Actual height” 是否真大于设定高度（比如
height: 100vh但地址栏显隐导致抖动）
父容器是 flex/grid 时 sticky 找不到锚点
Flex 或 Grid 容器默认不自动产生滚动上下文。当 sticky 元素直接挂在 display: flex 或 display: grid 子级下，若父容器没设高度约束、或用了 align-items: center 等对齐方式，sticky 的“进入视口”判断就会失准——它压根找不到可参考的滚动边界。
立即学习“前端免费学习笔记（深入）”；
- 给 flex/grid 父容器加
min-height: 1px或显式height/max-height，强制生成包含块 - 避免
display: inline-flex和display: inline-grid—— 它们不产生 BFC，sticky 直接被忽略 - 慎用
align-items: stretch或baseline，优先用flex-start，防止顶部基准线偏移导致top: 0失效 - 把
height: 100vh改成min-height: 100vh，允许内容自然撑高
Safari 下 -webkit-sticky 顺序写错等于没写
iOS Safari 15.4 及更早版本（覆盖大量存量设备）完全不识别 position: sticky，只认 position: -webkit-sticky，而且声明顺序写错会导致整条规则被跳过——不是“不生效”，是浏览器压根没解析成功。
- 必须写成：
position: -webkit-sticky;在前，position: sticky;在后 - 错误写法如：
position: sticky; position: -webkit-sticky;或-webkit-position: sticky（属性名不存在） - PostCSS 用户：确认
autoprefixer配置目标包含ios_saf，否则不会插前缀 -
@supports (position: sticky)不可靠，改用 JS 检测：CSS.supports('position', 'sticky') || CSS.supports('position', '-webkit-sticky')
必须保留 overflow: hidden 时怎么绕过？
overflow: hidden 常用于裁剪圆角图片、防止弹窗穿出、配合动画收边。硬删会破坏 UI，但 clip-path: inset(0) 能实现完全一致的视觉裁剪效果，且不创建新 BFC，对 sticky 零干扰。
- 替换写法：
overflow: hidden→clip-path: inset(0) - 注意不要写成
clip-path: inset(0px)（带单位），部分旧版 Safari 解析不稳定 - 兼容性：Chrome 93+、Firefox 97+、Safari 15.4+、Edge 79+，2026 年已全覆盖
- 若需兼容 IE，只能重构 DOM 或改用 JS 模拟，代价高、维护难
-
clip-path不影响盒模型尺寸，不会引发重排，性能友好
最容易被忽略的是：失效点往往不在你写的那行 CSS 里，而在某个框架组件的外层 wrapper 上，甚至是在你没打开的 DevTools 的 Computed 面板第三层祖先节点里。排查时别跳步，一层一层点 parentElement 看 overflow 计算值，比猜快得多。
