为什么CSS的position:sticky不生效？

sticky失效是因祖先元素overflow属性或flex/grid容器未创建滚动上下文导致被降级为static；需用DevTools逐级检查overflow、高度设置及Safari兼容写法，并可用clip-path替代overflow:hidden。

它不是“不生效”，而是被静默降级为 position: static —— 你写的 position: sticky 还在 Styles 面板里，但 Computed 面板里已经变成 static，说明浏览器压根没启动粘性逻辑。

DevTools 里 computed position 是 static，怎么快速定位拦截层

这是最典型的失效信号。浏览器会从 sticky 元素向上遍历所有祖先，只要遇到第一个 overflow: hidden、overflow: auto 或 overflow: scroll 的非-static 定位祖先（且该祖先自身不可滚动），就会强制降级。

1. 别只查直接父级：重点盯 .ant-modal-wrapper、.card 根节点、Swiper 外层、TabPane 容器、CSS-in-JS 动态注入的内联样式（比如 Emotion 的 data-emotion 节点）
2. 用 DevTools 的 Computed 面板逐级点「parentElement」，每层都看 overflow-x 和 overflow-y 的计算值，直到 body
3. 临时验证：在可疑祖先上右键 → Edit as HTML，加 overflow: visible !important；如果 sticky 立刻恢复，问题就锁定了
4. 注意 overflow: clip 同样触发降级，虽少见但需留意

父容器是 flex/grid 且没设高度，sticky 找不到锚定参考

Flex 或 Grid 容器默认不自动创建可滚动上下文。即使子内容撑高了，若没显式约束高度，浏览器无法识别出“滚动区域”，sticky 就失去作用域。

1. 把 height: 100vh 改成 min-height: 100vh，允许内容自然撑高
2. 给 flex/grid 父容器加 min-height: 1px 或显式 height/max-height，强制生成包含块
3. 避免 display: inline-flex 和 display: inline-grid —— 它们不产生 BFC，sticky 直接无效
4. align-items: center 或 baseline 会偏移顶部基准线，导致 top: 0 视觉失效；优先用 align-items: flex-start

iOS Safari 下 sticky-top 滚着滚着就消失

iOS Safari 对“可滚动容器”的判定更苛刻，尤其在嵌套或 transform 场景下。常见表现是吸顶后突然跳回文档流，或只闪一下就失效。

1. Safari 15.4 及更早版本只认 position: -webkit-sticky，且必须写在 position: sticky 前面：position: -webkit-sticky; position: sticky;
2. 别用 transform: translateZ(0) 强制硬件加速——它创建新层叠上下文，让 sticky 参考系变成变换后的容器，而非视口
3. flex 父容器仅写 overflow: auto 不够，Safari 要求同时有 flex-direction: column + overflow-y: auto
4. 检查 viewport 设置：若 viewport 中含 user-scalable=no 或缩放限制，可能干扰滚动检测

必须保留 overflow: hidden 时，clip-path 是唯一靠谱替代

硬删 overflow: hidden 会破 UI（比如圆角图片裁剪、弹窗边界约束），而 clip-path: inset(0) 能实现完全一致的视觉效果，且不切断粘性链。

1. 替换写法：把 overflow: hidden → clip-path: inset(0)
2. 兼容性已全覆盖（Chrome 93+、Firefox 97+、Safari 15.4+、Edge 79+），2026 年无需考虑 IE
3. 注意不要和 border-radius 同时用在一个元素上，可能导致渲染异常；可提一层 wrapper 分离
4. clip-path 不影响盒模型尺寸，不会触发重排，性能友好

真正麻烦的从来不是写错 top 或漏写 position，而是那些看不见的祖先样式——它们藏在框架封装里、动态注入中、甚至一行 transform 之后。每次 sticky 失效，先打开 DevTools 看 computed position，再往上翻 DOM 树查 overflow，比反复改自己那几行 CSS 有效得多。