sticky失效主因是祖先元素overflow静默降级，需逐级检查overflow-x/y计算值；Safari更敏感，可用clip-path: inset(0)替代overflow:hidden；-webkit-sticky必须前置声明；transform等会创建层叠上下文而禁用sticky；flex/grid容器需设align-items和max-height。
检查祖先元素的 overflow 是否静默禁用 sticky
绝大多数 sticky 失效不是浏览器不支持，而是被某层祖先的 overflow: hidden、overflow: auto 或 overflow: scroll 静默降级为 position: static。Safari、Chrome、Firefox 一致执行该规则，但 Safari 更敏感，常在 Modal、Card、Tab 或轮播组件外层触发。
- 用 DevTools 的「Computed」面板逐级向上点开
parentElement，查每一层的overflow-x和overflow-y计算值 - 临时加
overflow: visible !important测试是否恢复；若恢复，就确认是它拦截了 - 不能删
overflow: hidden（比如裁圆角或防弹窗穿出）？改用clip-path: inset(0)—— 视觉效果一致，且不创建新 BFC，sticky 完全不受影响 - 若父容器必须
overflow: auto（如横向滚动表格），给 sticky 元素包一层position: relativewrapper，把粘性锚点“提”到更高层级
确保 position: -webkit-sticky 声明前置且有效
iOS Safari 15.4 及更早版本（仍占相当比例）完全不识别 position: sticky，只认 position: -webkit-sticky，而且 CSS 解析器遇到非法值会跳过整行声明。
- 必须写成：
position: -webkit-sticky;在前，position: sticky;在后 —— 顺序错就全失效 - 别写
-webkit-position: sticky（属性名不存在）或只写标准声明 - PostCSS autoprefixer 需明确配置目标包含
ios_saf，否则不插前缀 -
@supports (position: sticky)不可靠，改用 JS 检测：CSS.supports('position', 'sticky') || CSS.supports('position', '-webkit-sticky')
避开 transform、filter、will-change 等创建新层叠上下文的父容器
只要 sticky 元素直系或间接父级用了 transform、filter 或 will-change，所有主流浏览器（包括 Safari）都会直接禁用 sticky —— 它们创建新层叠上下文，切断粘性锚定链。
- 常见于动画容器、模态框 wrapper、带阴影/模糊的卡片、甚至某些 UI 库的布局根节点
- 修复方式不是调样式，而是提升 DOM 层级：把 sticky 元素移出 transform 父级，挂到
body下或一个干净的position: relative容器中 - 若无法改结构，JS 模拟时也得注意：IE11/Safari 中
offsetTop在 transform 环境下不稳定，应改用getBoundingClientRect().top + window.pageYOffset
嵌套在 flex 或 grid 容器时补全高度与对齐约束
当 sticky 元素直接子级于 display: flex 或 display: grid 容器时，Safari 对“可滚动区域”的判定更苛刻：它需要明确主轴空间 + 稳定基线参考，否则找不到锚点。
立即学习“前端免费学习笔记（深入）”；
- 给 flex/grid 父容器加
align-items: flex-start（避免stretch或baseline干扰“进入视口”的判断） - 显式设
max-height+overflow-y: auto，而不是仅靠min-height: 100vh—— iOS Safari 中vh会随地址栏动态变化，导致高度不可靠 - 特别注意微信 X5 内核：它对 sticky 支持极不稳定，即使样式全对也可能随机失效，建议对微信环境统一降级为 JS 模拟
position 是不是 static，再顺着往上查 overflow 和 transform，最后看父容器是不是 flex/grid 且没设可滚动高度。 
