position: sticky在响应式布局中常失效，主因是滚动上下文、阈值匹配与层叠控制三者未同时满足：祖先overflow:hidden/auto静默降级为static；height:100vh截断滚动范围；transform/filter/will-change创建新层叠上下文；top未适配响应式高度变化；z-index缺失致内容穿透；ios safari 15.2–15.3存在兼容性bug。
position: sticky 在响应式布局里经常失效，不是浏览器不支持，而是响应式常用写法恰好踩中了 sticky 的多个硬性限制。它需要滚动上下文、阈值匹配、层叠控制三者同时成立，缺一不可。
祖先节点设了 overflow: hidden 或 auto
这是最隐蔽的“静默失效”原因：只要 sticky 元素任意向上一层（哪怕 body 或 layout wrapper）设置了 overflow: hidden、auto 或 scroll，且该祖先没设 position: relative 等定位属性，sticky 就会被浏览器直接忽略，降级为 static。
- 现象：DevTools 中
position的 Computed 值始终是static，滚动毫无反应 - 排查方法：在 Elements 面板逐级点开父节点，看 Computed 里的
overflow最终值 - 临时验证：删掉可疑祖先的
overflow声明，看是否立刻恢复 - 若必须保留溢出控制（如弹窗内列表），可加一层
position: relative包裹：
父容器用了 height: 100vh 或高度塌陷
sticky 只在**其包含块的滚动范围内生效**。height: 100vh 强制截断容器高度，即使子内容远超视口，父容器也不会产生滚动条——结果就是整个滚动上下文上移到 或更外层，sticky 元素失去锚定基准。
- 典型症状：页面初始显示正常，向下滚动一段后
sticky元素突然“消失”或跳回文档流 - 正确写法是改用
min-height: 100vh，允许容器随内容自然撑高 - Flex/Grid 布局中也要注意：若父容器设了
display: flex但没配flex-direction: column+overflow-y: auto，主内容区可能无独立滚动能力 - 浮动（
float）也会导致父容器高度塌陷，间接让 sticky 失效；推荐用display: flex替代浮动布局
sticky 元素自身或父级用了 transform、filter、will-change
这些属性会创建新的层叠上下文和格式化上下文，直接切断 sticky 与滚动容器之间的关联链。
- 尤其容易被忽略的是
transform: translateZ(0)这类“强制硬件加速”写法 - CSS-in-JS 库（如 styled-components）或动画库（如 framer-motion）可能自动注入
will-change: transform - 排查建议：在 DevTools 中临时禁用所有
transform、filter、will-change声明，观察是否恢复 - 若必须做动画，可用
top/left+position: relative过渡，或用 IntersectionObserver 手动切position: fixed
响应式切换时 top 值未适配或 z-index 缺失
top 不是固定数字，它必须匹配当前视口下的真实偏移；而 z-index 缺失会导致快速滚动时内容穿透。
- 桌面端导航栏高 64px →
top: 0；小屏下折叠为 48px 且有状态栏 → 应写top: env(safe-area-inset-top)，fallback 到top: 0 - 多级吸顶（如表格双表头）：第二行需用
top: calc(48px + 1px)，+1px是为避免 Safari 渲染边界重叠 -
z-index必须显式设置，且高于后续滚动内容；否则不是 bug，是层叠顺序没管好 - iOS Safari 15.2–15.3 有已知 sticky 错位与卡顿 bug，
@supports (position: sticky)完全无法检测，真机测试不可省
overflow 和 height，以及在真机上验证 iOS 表现。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
