sticky元素“滚到父容器底就消失”是因为其被限制在粘性约束矩形内生效，超出该矩形底部即退回到relative定位。该矩形由最近可滚动祖先的内容边界决定，可通过devtools观察position计算值变化或getboundingclientrect()验证。
sticky 元素为什么“滚到父容器底就消失”
因为 position: sticky 不是固定在视口，而是被限制在「粘性约束矩形（sticky constraint rectangle）」内生效——这个矩形由最近的、具备滚动行为的祖先容器的内容边界决定。一旦元素滚动超出该矩形的底部（或顶部/左右），它立刻退回到相对定位行为，随文档流继续滚动，看起来就像“被拉走”了。
如何确认当前 sticky 的约束矩形在哪
打开浏览器 DevTools，选中 sticky 元素，在 Computed 面板里找 position 值：滚动过程中若显示 sticky，说明还在约束矩形内；一旦变回 relative，说明已触达边界并退出粘性状态。
- 用
getBoundingClientRect()在控制台手动测：对比元素bottom与父容器scrollHeight或clientHeight - 给父容器加临时背景色和 border，观察其实际渲染高度是否撑满预期滚动区域
- 检查父容器是否设置了
height: 100vh（会锁死高度，无滚动空间）→ 改成min-height: 100vh - 若父容器是
display: flex或grid，确认没意外触发align-items: center/baseline导致内容未从顶部开始布局
overflow: auto 的父容器为何让 sticky 失效
当 sticky 元素的**直接父级**设置了 overflow-x: auto 或 overflow-y: auto，浏览器会把该父容器当作粘性锚点——但前提是它自身必须可滚动。如果它高度固定（如 height: 50vh）且内部内容不够高，就不会产生纵向滚动，sticky 就永远等不到“滚动触发”时刻。
- 错误结构：
.right { overflow-y: auto; height: 50vh; }→.header是它的子元素 → sticky 无纵向滚动上下文 - 正确做法：把
.header提一级，让它成为.wrapper { overflow-y: auto; max-height: 30vh; }的直系子元素 - 水平 sticky（
left: 0）同理：需确保父容器启用了overflow-x且内容宽度超限，否则不触发
iOS Safari 和 transform 共存时的错位陷阱
只要 sticky 元素的任意祖先（哪怕隔了三层）有 transform、filter 或 will-change，就会创建新的包含块（containing block），导致 sticky 的 top 值不再相对于视口或滚动容器计算，而是相对于那个变换后的祖先——结果就是位置漂移、提前脱离或卡在奇怪高度。
- 排查路径：从 sticky 元素向上逐层检查
transform、backface-visibility: hidden、filter: blur()等样式 - 不要为了“启用硬件加速”乱加
transform: translateZ(0)到外层 wrapper - iOS 15.4 之前，flex 容器默认不支持 sticky，需加
align-items: flex-start和min-height: 0强制修正
relative。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
