sticky定位生效需满足五条件：父容器有滚动上下文（设高度+overflow:auto/scroll）；sticky元素不能是table-row等特殊display值；必须指定top/bottom/left/right至少一个偏移值；祖先元素不能有transform/perspective/filter；避免contain:layout style paint等禁用行为。
sticky 定位生效的前提条件有哪些
position: sticky 不是“设了就粘”，它依赖父容器的滚动上下文和自身边界约束。最常被忽略的是：父元素必须有可滚动区域，且 sticky 元素不能脱离文档流过早。
- 父容器需有明确的高度限制（如
max-height或height）并设置overflow: auto或scroll；否则浏览器无法判断“滚动边界” - sticky 元素自身不能是
display: block以外的某些值（比如table-row），否则在部分浏览器中失效 - 必须指定
top、bottom、left或right中至少一个偏移值，仅写position: sticky不会触发粘性行为 - 若 sticky 元素的祖先中有设置了
transform、perspective或filter的元素，会创建新的层叠上下文并中断 sticky 效果（这是真坑）
为什么设置了 top 却不粘住？常见错误现象
典型表现是元素随页面滚动直接消失，或只在某段距离内“卡一下”就继续滚动走 —— 这往往不是 CSS 写错了，而是布局链断了。
- 父容器没有滚动能力：
overflow: hidden或未设高度 → 元素根本没机会“被粘” - sticky 元素被包裹在
flex或grid容器中，但父项未设align-items: start（Flex）或justify-items: start（Grid），导致其初始位置超出可粘范围 - 使用了
margin-top: auto或align-self: flex-end等让元素“上浮”的方式，使top偏移量实际无作用 - 在 Safari 中，如果父容器用了
contain: layout style paint，也可能禁用 sticky 行为
sticky 和 fixed 的关键区别在哪
二者视觉效果相似，但行为逻辑完全不同：
-
position: fixed脱离文档流，相对于视口定位，滚动时完全无视父容器边界 -
position: sticky仍属于文档流，它的“粘住”只是视觉暂留，一旦滚动到父容器边界外，就会恢复成普通块级行为（即继续随文档滚动） - 性能上，sticky 通常比 fixed 更轻量，因为它不强制重绘整个视口，但对父容器的渲染树影响更大（需持续计算粘性临界点）
- 兼容性：Chrome 56+、Firefox 59+、Safari 15.4+ 支持良好；iOS Safari 15.4 之前版本对
sticky在table或flex中的支持极差
一个可靠可用的 sticky 导航栏示例
适用于侧边栏或顶部导航，兼顾兼容与可控性：
立即学习“前端免费学习笔记（深入）”；
.sidebar {
position: -webkit-sticky; /* Safari 旧版 */
position: sticky;
top: 1rem;
max-height: calc(100vh - 2rem);
overflow-y: auto;
}
<p>.sidebar > <em> {
/</em> 防止子项撑开导致滚动失效 */
max-width: 100%;
box-sizing: border-box;
}注意：如果 sidebar 是 flex 子项，确保其父 flex 容器设了 align-items: flex-start；若用在表格行（tr），目前仅 Firefox 支持，Chrome 和 Safari 仍不支持 sticky 在 tr 上的行为。
真正麻烦的从来不是写那行 position: sticky，而是排查哪一层父容器悄悄加了个 transform，或者哪个 overflow 被设成了 hidden 却没人记得。
