position: sticky 失效主因是父容器未形成滚动上下文：需设显式高度（如100vh）和overflow-y:auto，且祖先元素不能有transform等隔离属性，侧边栏自身须声明top值。
直接写 position: sticky 很大概率没反应——它不是“设了就粘”，而是依赖一整套布局上下文条件，漏掉任一环，浏览器就当它是 position: relative 处理。
为什么侧边栏加了 position: sticky 却完全不悬停
最常见原因不是 CSS 写错，而是父容器没形成滚动上下文：
- 父元素没设显式高度（如
height: 100vh或max-height: calc(100vh - 64px)） - 父元素没设
overflow-y: auto（overflow: hidden或visible都会中断 sticky） - 从侧边栏向上查到
的任意祖先元素用了transform、filter、perspective或contain: layout - 侧边栏自身没声明
top或bottom值（比如只写了position: sticky，没配top: 64px）
用 DevTools 检查 .sidebar 的 Computed 面板，看 position 是否真解析为 sticky；临时把父容器的 overflow 改成 visible，如果突然能粘了，说明原 overflow: auto 设置位置不对或被覆盖。
top 值怎么设才真正起作用
top 不是视觉装饰值，而是触发粘性的临界距离。设得不准，会导致“根本粘不上”或“粘得太早盖住导航栏”：
- 若页面顶部有固定高度的导航栏（比如 64px），就写
top: 64px，这样侧边栏会在导航栏下方开始吸附 - 避免写死像素值（如
top: 100px），移动端键盘弹出或横屏时容易失效；推荐用top: 4rem或top: 10vh - 如果侧边栏在
display: flex容器中，加align-self: start，防止 Safari 下被拉伸变形导致计算偏移 - 不要用 JS 的
offsetTop判断位置——sticky 启用后该值不再随滚动更新；要用getBoundingClientRect()获取实时视口坐标
侧边栏和主内容区的宽度/间距怎么协调
sticky 侧边栏仍在文档流中，但 fixed 侧边栏已脱离流——这点决定内容区是否需要手动让位：
- 用
position: sticky：主内容区不用额外处理宽度或 margin，它会自然绕开侧边栏（前提是父容器是flex或grid布局） - 用
position: fixed：必须给主内容区（如.main）加margin-left: 250px或width: calc(100% - 250px)，否则会被遮挡 - 浮动布局（
float: left/right）+ sticky 是无效组合，因为 float 依赖文档流，而 sticky 在特定条件下会表现得像脱离流，结果常是侧边栏消失或换行错乱 - 更稳妥的结构是：
.container { display: flex; }，.sidebar { position: sticky; top: 64px; }，.content { flex: 1; }
真正卡住的点往往不在 sticky 本身，而在它的父容器有没有“可滚动的边界”——HTML 和 body 默认没有高度，height: 100% 在它们身上无效，必须显式写 html, body { height: 100%; margin: 0; }，否则子级 flex 容器撑不满视口，sticky 就找不到粘的参照系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
