sticky定位生效需同时满足：有滚动动作、有明确阈值（如top:0）、有合规容器（最近可滚动祖先且无overflow:hidden）；行内元素需设display:block，禁用transform及table布局，多方向阈值仅top/left有效。
sticky 定位生效的三个硬性条件
它不会“写了就粘”，必须同时满足：有滚动动作、有明确阈值、有合规容器。缺一不可。
-
position: sticky必须搭配至少一个偏移声明，如top: 0、bottom: 10px—— 只写position: sticky等同于position: relative - 元素必须处于一个“可滚动上下文”中：最近的、设置了
overflow: auto、scroll或overlay的祖先容器（或默认是body）；若任意父级设了overflow: hidden，sticky 直接失效 - 页面/容器必须存在真实滚动空间：元素上方或下方要有足够内容撑开高度，否则滚动事件不触发，阈值永远达不到
滚动阈值怎么算：不是“距离视口顶部”，而是“距离其滚动容器边界”
很多人以为 top: 0 是指“贴到浏览器窗口顶部”，其实它是相对于**最近的可滚动祖先容器**的内边距起点计算的。
- 如果 sticky 元素直接在
body下，且body可滚动，则top: 0表示粘到视口顶部 - 如果它在一个
div.scroll-container { height: 400px; overflow: auto; }里，则top: 0表示粘到该div的顶部内边缘，而不是整个页面顶部 - 当容器滚动到底部，sticky 元素会“松开”——它不会悬空在容器外，而是随容器一起退出视口
.scroll-container {
height: 400px;
overflow: auto;
}
.sticky-header {
position: sticky;
top: 0;
background: #fff;
z-index: 10;
}为什么写了 top 却不粘？常见静默失效原因
没有报错，但完全没反应——这类问题几乎都出在布局环境上，而非 CSS 本身。
- 父容器用了
transform（如transform: translateZ(0)），会强制创建新的层叠上下文和滚动容器，破坏 sticky 对原始滚动流的感知 - sticky 元素是
<span></span>或<a></a>这类行内元素，未显式设置display: block或inline-block - 祖先元素用了
display: table、table-row等表格相关 display 值，sticky 在这些 display 类型下被规范禁止 - 在 flex/grid 容器中，若父级设置了
align-items: center或justify-content: center，元素渲染位置偏移，导致top阈值无法按预期触发
多方向阈值与优先级：left 和 top 不是“同时生效”
你可以写 top: 10px; left: 20px;，但它不是“既固定在顶部又固定在左侧”，而是按方向优先级动态选择行为。
立即学习“前端免费学习笔记（深入）”；
- 垂直方向：只认
top，忽略bottom（即使两者都写） - 水平方向：只认
left，忽略right - 所以
top: 10px; left: 20px;表示“粘在滚动容器顶部内边距下 10px、左侧内边距右 20px 的位置”；而top: 10px; right: 30px;中的right实际无效
.dual-sticky {
position: sticky;
top: 10px;
left: 20px; /* right: 30px; ← 这行会被浏览器忽略 */
}真正决定 sticky 是否出现的，从来不是那行 position: sticky，而是它所处的滚动上下文是否干净、阈值是否落在可触达范围内、以及它的 display 和祖先样式有没有悄悄把它“拒之门外”。
