sticky定位失效主因是祖先元素overflow非visible或父容器未形成BFC；inline元素不支持sticky；需确保父容器有滚动边界且自身非inline。
sticky 定位没反应，大概率不是 top 写错了，而是浏览器压根没让它进入粘性计算流程——它被静默降级成了 static。
祖先元素设置了 overflow: hidden/auto/scroll
这是最隐蔽也最高频的失效原因。只要 sticky 元素向上任意一层（哪怕隔了 4–5 层）的祖先设置了 overflow: hidden、overflow: auto 或 overflow: scroll，且该祖先不是 sticky 元素的定位上下文（即没设 position: relative 等），sticky 就会被截断。
- DevTools 里看到声明写了
position: sticky和top: 0，但 Computed 值却是static - 常见“罪魁”：模态框外层 wrapper、卡片容器、Tab 标签页、轮播图组件、Ant Design 的
.ant-layout-sider - 临时验证：给可疑父级加
overflow: visible !important，如果 sticky 恢复，就确认是它 - 不删
overflow: hidden的替代方案：clip-path: inset(0)裁剪但不破坏滚动上下文
父容器没产生块格式化上下文（BFC）
sticky 必须挂在一个能提供明确滚动边界的 BFC 容器下。而 display: inline-flex 和 display: inline-grid 不产生 BFC，浏览器直接忽略 sticky 行为。
- 现象：Computed 中
position始终是static，哪怕 DOM 结构看起来完全正确 - 验证方式：把父容器临时改成
display: flex或display: grid，通常立刻生效 - 若需保持行内表现（如导航项并排），不要硬塞进
inline-flex，应把 sticky 元素提级到外层display: block容器中 - 注意：
float也会导致父容器高度塌陷，等效于失去 BFC，同样让 sticky 失效
sticky 元素本身是 inline 类型
CSS 规范明确禁止对纯 inline 元素（如 span、a、em）使用 position: sticky，它连样式计算阶段都不会进入。
- 即使你写了
position: sticky; top: 0，Computed 值仍是static - 必须显式设置
display：用display: block、display: inline-block或display: table -
inline-block适合保留行内语义的场景，但记得统一设vertical-align: top避免基线错位 - 别用
display: flex直接替换span——会破坏原有流式布局，可能引发换行或间距塌陷
父容器高度被锁死或塌陷
sticky 需要一个“可滚动的包含块”，如果父容器高度为 0、被 height: 100vh 锁死、或因浮动/absoluting 而塌陷，它就找不到滚动空间。
-
height: 100vh是典型陷阱：它强制截断容器高度，内容撑高后超出部分不属于 sticky 作用域，滚动到一半元素就“弹回”文档流 - 正确做法是改用
min-height: 100vh，允许容器随内容自然扩展 - Flex/Grid 容器若漏写
flex: 1或grid-template-rows: 1fr，自身可能 collapse，导致子元素无滚动上下文 - 检查 DevTools Layout 面板中 sticky 元素的 “Sticky constraint rectangle”，它直观显示实际绑定的范围
真正难排查的，往往不是单一原因，而是多个条件叠加：比如一个 inline-flex 父容器 + 里面有个 span + 外层又套了个 overflow: hidden 卡片 —— 这时只改一个地方根本没用。建议从 DevTools 的 Computed 面板开始，逐级往上查 position 和 overflow 的最终值，再看 Layout 里的高度是否合理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
