position: sticky 不生效最常见原因是父容器 overflow 非 visible 且未设 top 等偏移值；它依赖最近可滚动祖先，受 transform/will-change 干扰，不可与 absolute/fixed 共存。
为什么 position: sticky 不生效
最常见原因是父容器设置了 overflow（如 hidden、auto 或 scroll），这会截断粘性定位的“滚动上下文”。position: sticky 依赖最近的**具有滚动能力且未裁剪粘性区域**的祖先容器，一旦父级 overflow 不为 visible，吸顶就会失效。
另一个高频问题是没指定临界偏移值：sticky 必须配合 top（或 bottom、left、right）才能触发，只写 position: sticky 等同于无效果。
- 确保粘性元素的直接父容器
overflow为visible（默认值，但显式声明更稳妥） - 必须设置
top: 0（吸顶）、top: 10px（距顶部10px时吸住）等有效偏移值 - 避免在 flex 容器中对子项设
sticky后又设align-items: stretch——某些旧版 Chrome 下可能破坏计算
sticky 的兼容性与降级处理
现代浏览器基本支持 position: sticky，但 iOS Safari ≤ 15.4 和 Android WebView ≤ 76 存在 bug：当父容器有 transform 或 will-change 时，粘性行为会完全失效。这不是不支持，而是被意外禁用。
- 检查是否误加了
transform: translateZ(0)或will-change: transform到父级——删掉即可恢复 - 如需兼容极老环境（如微信内置浏览器 v7.0.9 以下），可用
IntersectionObserver+position: fixed手动模拟，但注意滚动抖动和fixed脱离文档流带来的布局空洞问题 - 不要用
@supports (position: sticky)做功能检测——它返回 true，但实际行为可能异常；更可靠的是运行时检测粘性元素是否随滚动“卡住”
多层嵌套中 sticky 的作用范围
sticky 的吸附边界由**最近的具有滚动能力的祖先容器**决定，不是视口。比如一个 sticky 元素放在 height: 300px; overflow-y: auto; 的卡片内，它只会在这个卡片内部吸顶，不会跑到整个页面顶部。
- 如果希望吸顶到 viewport 顶部，请确保该元素的可滚动祖先就是
body或html（即没有中间的overflow-y: auto容器） - 若嵌套在
position: relative或position: absolute容器中，只要该容器本身不产生滚动，不影响sticky行为 - 注意
body默认有margin，可能导致吸顶后与视口顶部留白——建议重置body { margin: 0 }
与其他定位方式共存时的冲突点
sticky 是“相对定位与固定定位的混合体”，它在未触发时表现如 relative，触发后像 fixed。因此不能和 position: absolute 或 position: fixed 同时设置——后者会覆盖前者，导致 sticky 完全无效。
- 禁止写
position: sticky; position: fixed;（后者生效，前者被忽略） - 慎用
z-index：吸顶后层级由其所在 stacking context 决定，若父容器是position: relative且z-index较低，吸顶元素可能被后面兄弟元素遮盖 - 不要指望
sticky触发后还能响应:hover外的伪类变化——它的渲染位置已脱离原始流，部分动画或过渡可能中断
position: sticky，而是判断它到底“粘给谁看”——是粘在父容器里，还是粘在视口里，又或者根本没粘成，只是被某个看不见的 overflow 或 transform 给悄悄关进了小黑屋。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
