position: sticky 在侧边栏失效最常见原因是父容器意外截断滚动流，必须同时满足父容器有可滚动上下文、显式设置top值、无transform/filter等触发新层叠上下文的属性，缺一则退化为static。
position: sticky 能实现侧边栏跟随滚动，但必须满足三个硬性条件：父容器有明确可滚动上下文、top 值显式设置、不触发新层叠上下文。缺一不可，否则直接退化为 static。
为什么 position: sticky 在侧边栏里不生效
最常见原因是父容器意外截断了滚动流。比如主内容区用了 overflow-y: auto，而侧边栏又恰好嵌套在它内部——这时 sticky 只会在那个带滚动的容器内生效，一旦侧边栏滚出该容器范围，就“卡住不动”或直接失效。
- 用开发者工具检查侧边栏的
Computed面板，确认position确实解析为sticky（不是被其他规则覆盖） - 临时把侧边栏直系父元素的
overflow改成visible测试是否恢复粘性 - 排查任意上级元素是否用了
transform、filter或will-change——这些会隐式创建层叠上下文，让sticky失效
top 值设多少才不遮挡内容
top 不是设成 0 就完事。它定义的是“开始粘住”的临界位置，必须等于页面顶部固定区域（如导航栏、页头）的高度。
- 如果页头高
64px，就设top: 64px，否则侧边栏会盖住标题 - 避免用
vh单位（如top: 10vh），视口缩放时容易错位 - 配合
z-index: 100保证层级，但别设成9999，后续弹窗可能被压住
Flex 布局下侧边栏高度撑不满怎么办
height: 100% 在 Flex 容器里经常失灵，根本原因是 html 和 body 默认没有计算高度，导致子级的百分比高度无从参照。
- 必须加
html, body { height: 100%; margin: 0; } - 主容器设
display: flex后，侧边栏用flex: 0 0 auto（禁拉伸禁缩放），内容区用flex: 1占剩余空间 - 侧边栏内部慎用嵌套的
height: 100%，尤其当父级有min-height或未闭合时，极易塌陷
真正难的不是写那行 position: sticky，而是搞清它到底“相对于谁滚动”——浏览器只认最近的可滚动祖先，而这个祖先往往被你无意中用 overflow 或 transform 给关掉了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
