sticky元素滚动到底部“掉下去”是因父容器无滚动余量致sticky降级为relative；主因包括height:100vh硬设、overflow:hidden/auto截断滚动链、transform/filter创建新层叠上下文，修复需改min-height、移除bfc中断属性并确保滚动上下文连贯。
sticky元素在父容器底部“掉下去”了
这是因为 position: sticky 不是全局视口吸附，它只在**最近的块级可滚动祖先容器内生效**。一旦滚动到底部，sticky 元素到达该容器的边界（比如父容器高度刚好被内容撑满），就失去了继续“粘”的空间，自动退回到文档流位置——看起来就像“突然掉下去”或“吸顶失效”。这不是 bug，是规范行为。
父容器高度不足或被锁死
常见于设置了 height: 100vh 的布局容器：它强制截断高度，导致内部无法形成有效滚动上下文。浏览器把滚动交给了更外层（如 body），而 sticky 元素却还挂在子容器里，锚点错位。
- 改用
min-height: 100vh替代height: 100vh，允许容器随内容自然扩展 - 若父容器是局部滚动区（如弹窗内列表），必须设
max-height+overflow-y: auto，且确保子内容总高度 >max-height - 避免
height: 100%，它依赖父级高度，容易链式塌陷，最终等效于height: 0
祖先 overflow 或 transform 切断了粘性链
只要任意祖先（从 sticky 元素向上直到 body）设置了 overflow: hidden、overflow: auto 或 transform，sticky 就会静默退化为 static。此时 computed position 显示为 static，滚动时完全无反应。
- 用 DevTools 的 “Computed” 面板逐层检查
overflow和transform的最终计算值 - 临时删掉可疑父级的
overflow声明，快速验证是否恢复 - 若必须保留
overflow: auto，加一层position: relativewrapper：<div style="overflow: auto"><div style="position: relative"><div class="sticky"></div></div></div>
表格表头或 flex 子项中 sticky 失效
<thead> 是 <code>display: table-header-group，浏览器明确不支持对其应用 sticky；flex 容器默认的 align-items: stretch 会干扰 sticky 的边界判断，导致它“以为自己一直在视口里”，结果始终不触发吸附。
- 给每个
<th> 单独写 <code>position: sticky; top: 0; z-index: 1070; background-color: #fff - flex 容器中，sticky 元素自身加
align-self: flex-start，打破拉伸干扰 - 别把 sticky 元素放在
flex-direction: column-reverse容器里——规范未定义反向流下的行为
真正容易被忽略的是：sticky 的“吸附范围”不是屏幕，而是它所在滚动容器的可视区域。这个容器可能不是你写的那个
div，而是被框架悄悄加了 overflow: hidden 的 .ant-layout-sider，或是被 transform: translateZ(0) 暗中创建新层叠上下文的祖先。查不到问题，往往是因为没查到那一层“看不见的拦截”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
