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，滚动时完全无反应。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 用 DevTools 的 “Computed” 面板逐层检查 overflow 和 transform 的最终计算值
• 临时删掉可疑父级的 overflow 声明，快速验证是否恢复
• 若必须保留 overflow: auto，加一层 position: relative wrapper：

  <div style="overflow: auto"><div style="position: relative"><div class="sticky"></div></div></div>

表格表头或 flex 子项中 sticky 失效

<thead> 是 display: table-header-group，浏览器明确不支持对其应用 sticky；flex 容器默认的 align-items: stretch 会干扰 sticky 的边界判断，导致它“以为自己一直在视口里”，结果始终不触发吸附。

立即学习“前端免费学习笔记（深入）”；

• 给每个 <th> 单独写 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) 暗中创建新层叠上下文的祖先。查不到问题，往往是因为没查到那一层“看不见的拦截”。