position: sticky 在 inline 元素上不生效，因规范禁止其用于非块级格式化上下文元素，解析时直接降级为 static；需改用 block、inline-block、table、flex 或 grid 等能创建 bfc 或独立定位容器的 display 值。
为什么 position: sticky 在 display: inline 元素上完全不计算
浏览器压根不会对纯 inline 元素（如 <span></span>、<a></a>、<em></em>）触发 sticky 行为——不是“失效”，是连样式计算流程都不进。W3C 规范明确禁止将 position: sticky 应用于非块级格式化上下文的元素，解析阶段就直接降级为 position: static。
- DevTools 里能看到你写了
position: sticky和top: 0，但 Computed 值始终是static，这就是最典型的静默跳过 - 即使你给
inline元素加了width、height或padding，只要没改display类型，sticky 就不会启动 - 别指望用
vertical-align或line-height“撑开”它来绕过限制——这些属性不影响格式化上下文类型
哪些 display 值能真正激活 sticky
必须让元素参与块级格式化上下文（BFC）或至少拥有独立的定位容器能力。以下写法可生效：
-
display: block：最稳妥，但可能破坏原有行内布局（比如导航项突然换行） -
display: inline-block：推荐用于需保持行内语义的场景（如菜单项），注意默认vertical-align: baseline可能导致基线错位，建议统一加vertical-align: top -
display: table或display: table-cell：兼容性好，但语义偏离，仅作兜底 -
display: flex/display: grid：可行，但会改变子元素布局逻辑，慎用于已有复杂嵌套的 inline 容器
为什么不能直接把 span 改成 display: flex
表面看它“能用”，但实际埋了两个坑：
- flex 容器默认
flex-direction: row，若内部有文本或子元素，它们会变成 flex item，不再继承父级line-height或font-size缩放行为，视觉可能突变 - 更关键的是：flex 容器自身若没设高度约束（如
min-height或height），且父级又没滚动上下文，sticky 依然会因找不到可滚动区域而退化 - 如果你只是想让一个
<span class="tag"></span>粘住，display: inline-block+vertical-align: top是更轻量、更可控的选择
容易被忽略的连锁失效点
改完 display 后仍不生效？大概率卡在下游环节：
- 父容器用了
display: inline-flex或display: inline-grid：它们不创建 BFC，sticky 元素即使自己是block，也会被外层直接忽略 - 某个祖先设置了
overflow: hidden（哪怕离得很远）：sticky 锚定链被截断，Computed 中position还是static - 父容器高度为
0或内容未溢出：sticky 需要真实滚动发生，没有滚动条 = 没有粘性上下文
真正起作用的从来不是单个声明，而是整个 DOM 路径上的 display、overflow、height 三者共同构成的“粘性通道”。缺一环，position: sticky 就只是段被浏览器默默吞掉的 CSS 文本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
