sticky元素生效的前提是父容器具有非零可滚动高度，若computed height为0或滚动链被overflow截断，则直接降级为static；常见原因包括父容器无高度、flex/grid布局挤压、overflow:hidden等，验证需检查layout面板高度及滚动上下文。
因为 sticky 元素必须在一个有非零可滚动高度的父容器中才能触发行为，父容器高度塌陷（computed height 为 0）时，浏览器连“是否该滚动”都懒得判断，直接跳过 sticky 逻辑，降级为 position: static。
父容器 computed height 为 0 是最硬的失效条件
sticky 不是“写上就生效”，它第一步就检查直接父容器有没有“可滚动上下文”——而这要求父容器至少得有溢出空间。如果 DevTools 的 Layout 面板里显示父容器的 Computed Height 是 0px，sticky 就不会启动，连 top 值都不读。
- 常见原因包括：
flex: 1子项但上层没设height或min-height；display: contents父级不产生 BFC；纯文字流内容太少又没撑开容器 - 验证方式：选中父容器 → DevTools Layout 标签页 → 看 “Layout Bounds” 是否有实际高度区域
- 临时加
min-height: 1px就能激活 sticky —— 这不是 hack，是明确告诉浏览器“这里可以滚”
height: 100vh 会锁死滚动上下文
很多人用 height: 100vh 想让容器占满视口，结果 sticky 滚到一半就掉下去。这是因为 height: 100vh 是固定高度，哪怕子内容总高 2000px，该容器也不会溢出、不会产生滚动条，sticky 失去触发前提。
- 必须改成
min-height: 100vh，允许容器随内容自然扩展 - 如果用了 Flex/Grid，注意别给兄弟项加
height: 100%，否则会挤压父容器高度计算 - 在测试阶段加
border: 1px solid red能快速确认容器是否真有滚动能力
祖先 overflow: hidden/auto/scroll 会静默截断滚动链
sticky 向上查找“最近可滚动祖先”，一旦遇到任意一层写了 overflow: hidden、overflow: auto 或 overflow: scroll，它就立刻被锚定到那一层——但如果那层本身不滚动（比如高度刚好、内容没撑开），sticky 就退化为 static，DevTools 里 computed position 显示为 static 就是这个原因。
- 重点排查模态框（
.ant-modal）、卡片（.card）、Tab 容器、Swiper wrapper，它们常带隐藏的overflow - 临时加
overflow: visible !important到疑似父级，若 sticky 恢复，问题坐实 - 不能删
overflow: hidden？用clip-path: inset(0)替代，视觉效果一致但不创建新 BFC
真正容易被忽略的是：sticky 的生效不依赖你写了多少样式，而取决于浏览器是否认定“这里正在发生滚动”。只要父容器没有真实可滚动高度、或滚动链被某层 overflow 截断、或自身被 transform/filter 干扰，它就会彻底静默——且不报错、不警告，只在 DevTools 里悄悄变成 static。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
