position: sticky 实现侧边栏吸边需同时满足三条件：父容器具备滚动上下文、侧边栏设置 top 值、祖先元素未创建新层叠上下文；任一缺失即降级为 static 或 relative，导致“不固定”实为被静默忽略。
position: sticky 能实现侧边栏随屏滚动，但它不是写了就生效，必须同时满足三个硬条件：父容器有滚动上下文、侧边栏设了 top 值、祖先元素没触发新层叠上下文。漏掉任一，浏览器直接降级为 position: static 或 relative，你看到的“不动”其实是被静默忽略了。
为什么加了 position: sticky 和 top: 64px 却完全不固定？
最常踩的坑不是 CSS 写错，而是布局链断在父级：
- 父容器没设 height 或 max-height（比如只写了 height: auto），浏览器找不到滚动边界
- 父容器设了 overflow: hidden 或 overflow: visible（visible 是默认值，但会中断 sticky）
- 从侧边栏往上查，任意祖先用了 transform、filter、contain: layout 或 perspective
- top 值设得太大（如 top: 200px），而内容总高不足，根本触不到临界点
- 用 DevTools 检查侧边栏的 Computed 面板，确认 position 真解析为 sticky；临时把父容器 overflow 改成 visible，如果突然能粘了，说明原 overflow: auto 设置位置不对或被覆盖
父容器怎么配才让 position: sticky 生效？
关键不是“让它能滚”，而是“让它成为最近的可滚动祖先”：
- 给侧边栏的直系父容器设 max-height: calc(100vh - 64px) + overflow-y: auto（不能是 scroll 或 hidden）
- 确保 html 和 body 有显式高度：html, body { height: 100%; margin: 0; }，否则子级 height: 100% 无效
- 如果父容器是 display: flex，加 align-self: start 防止 Safari 下被拉伸变形导致偏移计算错误
- Safari ≤15.4 对 flex 容器内 sticky 支持不稳定，可加 min-height: 1px 做兜底
- 别用 scroll-behavior: smooth，它有时会干扰 sticky 的位置判定
侧边栏和主内容区怎么排布才不遮挡、不换行？
position: sticky 元素仍在文档流中，这点决定内容区是否需要手动让位：
- 推荐结构：.container { display: flex; }，.sidebar { position: sticky; top: 64px; }，.content { flex: 1; }
- 不要用 float: left + sticky，float 依赖文档流，sticky 在临界点行为类似脱离流，结果常是侧边栏消失或换行错乱
- 如果用 Grid，确保 .sidebar 和 .content 是同级 grid item，且滚动发生在它们的共同父容器（如 .content-wrapper）上，而不是整个页面
- sticky 的“固定”始终受限于父容器边界——一旦侧边栏滚动出父容器范围，它立刻恢复文档流位置。这不是 bug，是设计使然
如何避免侧边栏滚到页脚时盖住 footer？
bottom 在侧边栏上基本无效，Firefox 和 Safari 支持尤其差，它不是“离页脚还有 20px 就停”，而是“当元素底边距离其滚动容器底边还有 20px 时开始吸附”——但侧边栏容器往往没明确底边：
- 正确做法是控制滚动容器，而不是侧边栏自己：给侧边栏的直接父容器加 padding-bottom: 20px
- 或者在侧边栏内部末尾插入一个空 <div>，设 <code>height: 20px，它会撑开容器底部空间，sticky 行为会在触达该 div 顶部时停止继续上移
- 必须确保该父容器有显式高度约束（如 max-height: calc(100vh - 64px)）并设 overflow-y: auto
真正卡住的点往往不在 position: sticky 本身，而在于你是否意识到：它的“粘性”永远只相对于最近的可滚动祖先生效，而不是整个视口；它的行为受制于容器边界，而非页面结构；它的失效几乎总是布局链断裂，而不是样式写错。
