position: sticky侧边栏生效需同时满足：①显式设置top等偏移值；②直接父容器有高度限制且overflow-y: auto；③该父容器不能是flex/grid子项且自身未设高度。
position: sticky 侧边栏必须满足的三个硬性条件
只写 position: sticky 不会生效，它不是“开箱即用”的属性，而是依赖严格的上下文约束。漏掉任意一个，侧边栏就静默失效，且不报错、不提示。
-
top（或bottom/left/right）必须显式声明，不能是auto或未设置；常见错误是只写了position: sticky就以为完事了 - 侧边栏的**直接父容器**必须有明确的高度限制（如
max-height: 100vh或height: 800px），且同时设置overflow-y: auto—— 它得能滚动，sticky 才有“可粘”的上下文 - 该父容器不能是
display: flex或display: grid的子项，且自身又没设高度；flex/grid 容器默认不创建滚动上下文，sticky 会找不到锚点而退化为relative
为什么侧边栏滚着滚着就“掉下去”了
这不是 bug，是 sticky 的行为定义：它只在父容器的**滚动范围内**粘住，一旦父容器本身被滚出视口，或者侧边栏内容超出父容器高度，它就会立刻解除粘滞、随文档流继续滚动。
- 典型表现：侧边栏一开始能粘，往下滚一段后突然“跳回”原始位置，甚至消失——大概率是父容器高度不够，或内部内容撑开了它导致
overflow-y: auto失效 - 另一个常见原因：父容器顶部有
padding-top或margin-top，把“粘性触发区”向上挤出了可视范围，top: 0实际没机会触发 - 如果侧边栏嵌套在
<main></main>或<article></article>这类语义化标签里，而这些标签没设高度和overflow，sticky 一定不工作
sticky 和 fixed 在侧边栏场景的本质区别
选哪个不是风格问题，而是行为需求问题。二者不可互换，强行混用只会引发遮挡、错位、移动端定位偏移等连锁问题。
-
position: fixed：完全脱离文档流，相对于视口定位；侧边栏始终钉在左上角，不管页面怎么滚、内容多长；但主内容区必须主动让出空间（比如给.main加margin-left: 250px） -
position: sticky：只在父容器内粘，父容器滚出视口它就走；不脱离文档流，不需手动避让；适合“局部粘滞”，比如每个<section></section>配一个独立侧边栏，随本节内容进退 - Safari 15.2–15.3 存在渲染抖动，建议加
will-change: transform缓解；IE 完全不支持，别试图 polyfill
真实可用的 HTML + CSS 结构模板
结构比样式更重要。很多失败案例根本不是 CSS 写错了，而是 DOM 层级没对齐 sticky 的作用域边界。
<div class="layout">
<div class="sidebar-scroller"> <!-- ✅ 必须由这个容器承担滚动 -->
<aside class="sidebar"><h3>目录</h3>
<nav></nav></aside>
</div>
<main class="content"></main>
</div>
对应关键 CSS：
.sidebar-scroller {
max-height: 100vh;
overflow-y: auto;
}
.sidebar {
position: sticky;
top: 16px; /* 偏移量要留出呼吸空间 */
}
.content {
/* 不需要 margin-left！因为 sticky 不脱离流 */
}
真正麻烦的从来不是怎么写那几行 CSS，而是得一层层确认：谁在滚动？谁是 sticky 元素的父块？这个父块有没有被 flex 自动撑高而失去滚动能力？这些细节漏一个，效果就静悄悄地不出现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
