侧边栏父容器必须设max-height和overflow-y:auto，否则sticky退化为relative；top值需小于容器可用高度才触发粘性；bottom不可靠应避免；祖先含transform/filter会切断sticky上下文。
侧边栏父容器必须设 max-height + overflow-y: auto
浏览器只认“最近的、有滚动能力的祖先”作为 sticky 的锚点容器。如果父容器没设 max-height 或 height，又没配 overflow-y: auto，它就不是可滚动容器——position: sticky 直接退化为 relative，你根本看不到固定效果。
常见错误写法：overflow: scroll 或 overflow: hidden 都不行；overflow: visible（默认值）更不行，它会中断 sticky 上下文。
-
max-height: calc(100vh - 64px)是稳妥选择，预留顶部导航高度 - 避免用
height: 100%，除非html和body已显式设height: 100%，否则子级百分比高度失效 - 若父容器是
display: flex，加align-self: start防 Safari 下拉伸导致top计算偏移
为什么 top 值必须小于父容器实际可用高度
top 不是装饰参数，是触发粘性的物理阈值：只有当侧边栏滚动到距离父容器顶部 top 指定距离时，sticky 才启动。如果 top: 100px，但父容器内容总高不到 100px，它永远触不到临界点，表现就是“完全不动”。
- 用 DevTools 检查侧边栏的 Computed 面板，确认
position真解析为sticky，而不是被静默降级 - 临时把父容器
overflow改成visible，如果突然能粘了，说明原overflow-y: auto设置位置不对或被覆盖 - 不要用
bottom控制侧边栏底部留白，Firefox/Safari 对它支持极差；改用父容器padding-bottom或末尾插占位div
祖先元素不能有 transform/filter/contain
哪怕只是 transform: translateZ(0) 或 filter: opacity(1)，都会创建新层叠上下文，直接切断 sticky 的滚动上下文链。这时侧边栏不是“不粘”，而是连判定机会都没有——浏览器把它当普通 relative 元素处理。
- 逐级往上检查
html、body、布局 wrapper 是否写了transform、perspective、filter、contain: layout - 慎用
will-change: transform和backface-visibility: hidden，它们也隐式触发新层叠上下文 - Safari ≤15.4 对 flex 容器内 sticky 支持不稳定，可加
min-height: 1px做兜底
侧边栏和主内容共用同一滚动容器才不会错位
sticky 的“固定”始终受限于父容器边界。如果你把侧边栏和主内容分别放在不同容器里，或者让整个页面滚动（比如 body 滚动），侧边栏就会在滚动中突然消失或卡顿——因为它只在自己的父容器内生效，而那个容器可能根本没滚。
- 推荐结构：
.container { display: flex; }，.sidebar和.content是同级子项，滚动发生在.container内部（如给.content设overflow-y: auto） - 别用
float+sticky，浮动依赖文档流，sticky 在临界点行为类似脱离流，结果常是侧边栏换行或消失 - 如果用 Grid，确保
.sidebar和.content是同级 grid item，且滚动容器是它们的共同父级，不是html或body
真正难的不是写 position: sticky 这一行，而是把整条布局链都配对：从 html 高度开始，到父容器尺寸与溢出控制，再到祖先是否干净、子项是否对齐——漏掉任意一环，sticky 就静默失效，连报错都不会有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
