sticky失效的根本原因是父容器未形成可滚动上下文：高度不足、overflow:hidden/auto/scroll截断、未设top等偏移值，或父容器高度≤sticky元素自身高度。
sticky元素随父容器滚出屏幕，根本原因不是“它想跟着走”，而是它的粘性行为被锁死在父容器的滚动范围内——父容器高度太小或无法滚动，sticky就只能在那一小块区域里“粘”，粘完就回归文档流。
父容器没形成可滚动上下文，sticky根本没机会粘
sticky定位必须依附于一个“能滚动”的祖先容器。如果父容器高度刚好等于内容、没溢出，或者设置了height: 100vh这种硬性截断，浏览器判定“无需滚动”，position: sticky直接退化为static，你看到的就是元素一路滚走。
-
height: 100vh是典型陷阱：它强制容器不随内容扩展，哪怕子元素撑出三屏高，父容器仍只认100vh，sticky作用域就被卡死在这里 - 用
min-height: 100vh代替，既保底又放行，让容器能随内容自然增高 - Flex/Grid容器若没设
height或max-height，且没触发BFC，也可能不被视为有效滚动上下文
祖先元素overflow:hidden/auto/scroll悄悄切断了sticky链
只要sticky元素向上路径中任意一层（不一定是直接父级）设置了overflow: hidden、overflow: auto或overflow: scroll，它就会被当作sticky的“边界容器”。即使那层本身根本不滚动，sticky也被关在里面动不了。
- 常见藏匿点：
.ant-modal、.card、Tab外层wrapper、Swiper壳——这些组件常默认加overflow: hidden防溢出 - 用DevTools逐级点开
parentElement，看Computed里的overflow值，别只盯直接父级 - 必须保留裁剪效果时，用
clip-path: inset(0)替代overflow: hidden，它不创建新包含块，sticky完全不受影响
sticky元素没设top/bottom/left/right，等于没写
写了position: sticky但没跟top等偏移值，CSS规范明确按static处理。这不会报错，控制台也安静，但元素就是不动。
- 必须显式声明至少一个方向偏移，比如
top: 0、bottom: 10px -
top: auto无效；top: 0px和top: 0都有效 - 如果用CSS变量如
top: var(--sticky-top, 0)，确保--sticky-top已定义，否则回退值可能未生效
父容器高度 ≤ sticky元素自身高度，粘无可粘
sticky不是吸顶神器，它需要“有地方粘”。如果父容器计算后高度比sticky元素还小（比如因display: contents塌陷、或flex子项没约束高度），浏览器连粘性边界都算不出来。
- 给父容器加
min-height: 1px有时就能激活——这不是hack，是告诉浏览器“这里至少有一行滚动空间” - 避免把sticky元素放在
display: inline-flex或display: inline-grid的父级里，inline级容器不产生BFC - Flex容器中若兄弟项用了
height: 100%，可能挤压父容器高度计算，间接导致sticky失效
真正难排查的，往往是那个没写在你代码里、却存在于第三方组件或CSS-in-JS注入中的overflow: hidden——它不声不响，就把sticky锁死了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
