sticky元素仅在最近可滚动祖先内生效，该祖先需满足overflow为auto/scroll/hidden且内容高度超自身高度；若父容器height:100vh则无滚动，应改用min-height:100vh并确保内容溢出。
因为 sticky 元素根本不会“超越”父容器——它只在“最近的可滚动祖先容器”内部生效，而这个容器的高度就是它的活动边界。
sticky 的滚动上下文由最近可滚动祖先决定
浏览器不会把 sticky 元素的父元素自动当作滚动容器。它向上查找第一个满足两个条件的祖先：overflow 值为 auto、scroll 或 hidden（且该祖先自身有非零高度），同时该祖先必须能产生滚动条（即内容总高 > 自身高）。一旦找到，sticky 就被锁死在这个容器内。
- 如果父容器是
height: 100vh，但内容总高 200vh，sticky 只能在前 100vh 区域粘住，超出后退化为position: static - 如果中间某层卡片组件（如
.card）带了overflow: hidden，sticky 会被锚定到它身上——哪怕它只有 300px 高 - 用 DevTools 选中 sticky 元素，在 Computed 面板看
position值：滚动时若变回static或relative，说明滚动上下文已丢失
父容器 height: 100vh 是最典型的“物理截断”
height: 100vh 是固定高度声明，它强制容器不随内容伸展。哪怕子内容撑出 5000px，该容器也不会溢出、不会产生滚动条，sticky 失去触发前提。
- ✅ 改成
min-height: 100vh：既保底显示，又允许内容自然扩展滚动上下文 - ❌ 避免
max-height: 100vh：直接砍掉超出部分，sticky 连触发机会都没有 - ⚠️ 即使用了
min-height: 100vh，也要确保子内容总高确实 > 容器当前高度，否则仍无滚动
sticky 元素本身不能脱离文档流占位
sticky 不是 fixed，它“粘住”时仍占据原始位置。如果父容器高度刚好卡在 sticky 元素底部，后续内容会顶上来，造成视觉上“跑出边界”的错觉。
- 给 sticky 元素的下一个兄弟元素加
margin-top，值等于 sticky 元素的渲染高度（比如margin-top: 64px） - 更稳妥的是给整个内容区加
padding-top，避免依赖单个兄弟节点 - 别对 sticky 元素设
transform或z-index: -1，这会破坏粘性或导致层级异常
真正容易被忽略的点是：sticky 是否生效，和你写了多少样式无关，只取决于浏览器是否认定“这里正在发生滚动”。验证永远从父容器的 Layout Bounds 和逐级 overflow 开始，而不是反复调 top 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
