sticky 在高度自适应容器中不生效，是因为缺少明确高度边界的包含块作为滚动上下文；父容器需有 height/max-height/min-height 且祖先不能有截断 overflow，否则 sticky 退化为 static。
sticky 在高度自适应容器里不生效，不是 CSS 写错了，而是浏览器根本没找到可滚动的“锚点”——它需要一个有明确高度边界的包含块来计算粘性范围。
父容器没显式高度，sticky 直接退化为 static
浏览器对 position: sticky 的触发非常严格：如果 sticky 元素的直接父容器没有 height、max-height 或 min-height，且自身又靠内容撑高（比如纯文字流），那么该容器就无法成为有效的滚动上下文。结果就是 DevTools 里看到 computed position 是 static，滚动时完全不动。
- 临时加
min-height: 1px就可能激活 sticky —— 这不是 hack，是告诉浏览器“这里至少存在一行可滚动空间” - 用 DevTools 的 Layout 面板检查父容器的 “Layout Bounds”，确认它真有非零高度区域
- Flex/Grid 容器中，如果父级设了
flex: 1，但它的上层没给高度约束（比如html或body缺少height: 100%），sticky 同样不会启动
用了 height: 100vh 却期望内容滚动？这是最常见误用
height: 100vh 是 sticky 失效的头号原因。它把父容器物理锁死在视口高度，哪怕子内容撑到 500vh，容器也不会产生滚动条，浏览器判定“无需滚动”，sticky 就被静默忽略。
- ✅ 必须改成
min-height: 100vh：既保底视口高度，又允许内容自然撑高 - ❌ 别用
max-height: 100vh+overflow-y: auto包裹 sticky 元素——这会让 sticky 锚定在那个小滚动区内部，而不是整页 - ⚠️ 检查所有祖先元素：只要某一级写了
height（哪怕是height: 400px），且内容实际超出它，就可能成为 sticky 的“隐形边界”
overflow: hidden/auto/scroll 会切断粘性链
sticky 的定位参考系是“最近的可滚动祖先”。一旦路径上任意一层设置了 overflow: hidden、overflow: auto 或 overflow: scroll，这条链就会被截断或重定向。
-
overflow: hidden：sticky 彻底不触发（不是失效，是压根不进入粘性状态） -
overflow: auto：sticky 只在该容器内粘，超出即回归文档流 - 排查方法：用 DevTools 逐层选中祖先，看 Computed 面板里的
overflow值；临时加overflow: visible !important验证 - 真正要隐藏溢出又不干扰 sticky？优先用
overflow: clip（现代浏览器支持，不创建新滚动上下文）
iOS Safari 对 flex/grid 父容器更苛刻
在 iOS 15.4 之前，Safari 不支持 body 作为 sticky 上下文；即使新版，flex/grid 父容器若没调好对齐和高度，sticky 依然容易“掉帧”或只粘半截。
- 给 flex 父容器加
align-items: flex-start，避免stretch或baseline干扰“进入视口”的判断 - 仅写
min-height: 100vh不够，iOS 可能仍不认——建议搭配height: 100%和明确的父级高度约束（如html, body { height: 100%; }） - 绝对不要用
display: inline-flex或display: inline-grid作 sticky 父级，它们不产生块格式化上下文（BFC），sticky 直接失效
真正难的不是写对 top，而是让浏览器相信“这里有滚动”。每个祖先的高度声明、overflow 设置、transform 属性，都在悄悄投票决定 sticky 能不能活下来。稍有不慎，它就安静地退回文档流，连报错都不会有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
