sticky失效主因是父级盒模型高度为0或不可滚动，导致浏览器将其降级为static；常见诱因包括height:100vh截断滚动、flex布局中父级无高度、inline-flex不创建BFC、浮动致高度塌陷等。
父级盒模型高度为 0 或不可滚动，是 sticky 失效最常见、也最容易被误判为“CSS 写错了”的原因。它不报错、不警告，只默默把 position: sticky 降级为 static。
为什么 height: 100vh 会让 sticky 突然掉下去
浏览器判定 sticky 是否生效，第一件事就是找“最近的可滚动祖先”。height: 100vh 把容器物理锁死——哪怕子内容撑到 300vh，它也不产生滚动条，浏览器直接认为“这里不能滚”，sticky 就没锚点了。
-
height: 100vh是硬性截断，min-height: 100vh才是保底+可扩展的正确写法 - 如果父容器同时有
height: 100vh和overflow: hidden，sticky 会更早失效（两者叠加，连 fallback 都没机会） - 在 Flex 布局中，
flex: 1的子项若父级没设height或min-height，它自身高度可能为 0，导致 sticky 元素挂在“空气”上
怎样快速验证父容器是否真有滚动高度
别猜，用 DevTools 直接看真实布局数据：
- 选中 sticky 元素 → 打开「Computed」面板 → 确认
position是sticky还是static - 点击右侧「parentElement」链接，逐级向上点进父容器 → 切到「Layout」面板 → 查看 “Layout Bounds” 和 “Actual height” 是否 > 0
- 临时给父容器加
outline: 1px solid red，看是否真能框出一块区域；若 outline 不显示，说明高度确实塌了 - 对疑似问题父级加
min-height: 1px !important，如果 sticky 恢复，就坐实是高度问题
display: flex / inline-flex 父容器的陷阱
不是所有 display 值都支持 sticky 定位参考，尤其当父容器本身不产生 BFC 时：
-
display: inline-flex和display: inline-grid不创建块格式化上下文，sticky 元素会被浏览器直接忽略（Computed 中永远是static） -
display: flex（块级）可以，但必须确保它自己有高度来源：要么显式设height/min-height，要么靠兄弟项撑开 - 避免把 sticky 元素放在
display: contents或display: table父级下——前者不生成盒子，后者对 sticky 支持极差
浮动（float）导致父容器高度塌陷的连锁反应
浮动元素脱离文档流，父容器无法感知其存在，高度计算为 0。sticky 元素挂载在这样一个“空盒子”上，自然无处可粘：
- 重点检查 sticky 元素的**直接父级**是否用了
float: left或float: right，或其兄弟元素用了 float 却没清除 - 常见结构：
#header下紧挨着#leftContent { float: left }和#rightContent { float: right }，而父容器没触发 BFC - 修复优先级：用伪元素清除（
.parent::after { content: ""; display: table; clear: both; }）比overflow: hidden更安全，后者可能意外创建新滚动上下文，干扰 sticky 链 - 终极解法：改用
display: flex替代浮动布局，既规避高度塌陷，又天然兼容 sticky
真正难调试的，往往不是某一行 CSS 写错了，而是你盯着 sticky 元素本身看半天，却没往下查它的父容器有没有“实际存在”。高度塌陷、BFC 缺失、滚动上下文被截断——这些都不是样式错误，而是布局契约没达成。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
