position: sticky 失效主因是父容器无明确高度或滚动上下文、未设有效top值、祖先存在transform/filter/overflow等干扰属性；缺一即退化为relative/static。
为什么用 position: sticky 实现侧边栏会失效？
position: sticky 不是“悬浮”，而是“在父容器内滚动到临界点时暂停”。侧边栏若要随页面滚动始终可见，必须脱离文档流——而 sticky 仍属于文档流，一旦父容器高度不够、或父容器没设 overflow: visible（默认就是），它就会提前脱离粘滞状态，甚至完全不触发。常见现象：侧边栏只在首屏可见，一滚动就消失；或卡在父容器顶部不动。
- 父容器必须有明确高度（如
height: 100vh或max-height），否则sticky无临界点可计算 - 父容器不能是
display: flex且未设flex-direction: column—— Flex 容器对sticky的锚点行为支持不稳定，尤其 Safari -
top值必须有效：写top: 0但父容器没滚动空间，等于没用；写top: 24px却忘了留出上边距，可能被 header 挡住
position: fixed 才是真正可行的方案
固定定位才是视口级悬浮的唯一可靠路径。但直接套 fixed + display: flex 很容易白忙活——因为 fixed 元素脱离文档流后，Flex 容器若没显式宽高，实际尺寸常为 0px × 0px，图标全堆左上角，点击区域也无效。
- 必须给容器设
width和height（如width: 60px; height: 240px;），不能靠子项撑开 - 垂直居中用
top: 50%; transform: translateY(-50%);，别依赖父容器的align-items（它不起作用） - 水平定位用
right: 24px（非0），留安全边距防 iOS 截断 - 子按钮统一设
width: 100%+ 固定height，避免文字长度影响布局
Flex 容器内部怎么排按钮才不拉伸变形？
SVG 图标、文字标签在 Flex 容器里容易被拉宽或压扁，尤其当容器高度固定但内容高度不一时。
- 每个按钮设
flex: 0 0 auto，禁用伸缩，防止flex-grow或flex-shrink干预 - 用
gap: 8px控制间距，比margin更稳定（margin在fixed下易被外部样式污染） - 若含
<svg></svg>，务必在标签内写死width和height属性（如<svg width="24" height="24"></svg>），纯 CSS 缩放会加剧渲染偏移 - 避免同时写
right: 24px和justify-content: flex-end——定位值和 Flex 对齐逻辑冲突，导致位置飘忽
iOS Safari 上抖动、跳位怎么压？
这不是 bug，是 WebKit 渲染管线对视口锚点重计算的延迟表现。软键盘弹出、快速滚动时，fixed + flex 组合极易上下跳动。
- 必须加
will-change: transform到容器上，触发硬件加速，这是最轻量也最有效的缓解手段 - 别在同一个元素上叠加
top/bottom和transform: translateY()，反而加重跳变 - 慎用
overflow: hidden——它可能剪掉抖动产生的临时溢出，但掩盖了真实问题，应优先解决根源
真正稳定的侧边栏，从来不是靠“猜 Flex 行为”实现的。它需要你亲手钉死宽高、绕过隐式规则、并在关键节点加硬件加速提示——这些动作看起来琐碎，但每一条都对应着某个浏览器渲染链路上的真实约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
