position: fixed侧边栏被遮挡或错位，根本原因是父级元素的transform、perspective或will-change触发新包含块，使其定位基准变为父容器而非视口；需检查祖先元素computed样式并移除干扰属性，或将其提至body下，同时主内容区须用margin-left主动让位。
为什么position: fixed侧边栏常被遮挡或错位
固定定位的侧边栏不是“钉在屏幕左上角”就完事了——它默认以视口为参考，但一旦父级元素有transform、perspective或will-change: transform，就会创建新的定位上下文，导致它相对父容器而非整个视口定位。常见现象是：侧边栏卡在某个卡片内部、随滚动偏移、甚至完全消失。
排查方法：用浏览器开发者工具检查侧边栏所有祖先节点的 computed styles，重点看是否有非 auto 的 transform 或 will-change。临时移除这些样式，确认是否恢复预期行为。
- 必须确保侧边栏直接父容器没有干扰性定位属性；否则改用
position: sticky+top: 0更稳妥 - 若父容器必须带动画（如
transform: translateZ(0)），不要硬调z-index强行覆盖，而是把侧边栏提到 body 级别作为直接子元素 - 避免嵌套在
nav、header或带overflow: hidden的容器里——sticky会失效，fixed可能被裁剪
如何让主内容不被fixed侧边栏盖住
position: fixed 元素完全脱离文档流，主内容不会自动让位。靠 margin-left 硬撑是最直接、兼容性最好的方式，但值必须和侧边栏宽度严格一致，且需同步响应式变化。
- 侧边栏设
width: 64px（快捷操作栏典型宽度），主内容区（如<main></main>）加margin-left: 64px - 移动端收起时，用
transform: translateX(-100%)隐藏侧边栏，同时主内容的margin-left改为0，避免留白跳动 - 不要对
加padding-left——缩放时可能触发横向滚动条 - 如果用 Flex 布局，主内容设
flex: 1即可自动避让，无需手动写margin，但要确保侧边栏声明flex: 0 0 64px
fixed侧边栏内部滚动与高度控制的关键点
快捷操作栏通常只有几个图标按钮，但若未来扩展为带文字说明或分组菜单，内容可能超出视口高度。此时必须限制其高度并启用局部滚动，否则溢出内容不可见，还可能撑大页面。
- 显式设置
height: calc(100vh - 64px)（减去顶部导航栏高度），不能只写height: 100vh - 配合
overflow-y: auto，且确保容器内有足够高度的内容（比如用min-height: 100%防止塌缩） - 避免用
min-height或max-height替代明确的height——overflow-y: auto在无确定高度时可能不生效 - iOS Safari 中，
100vh在地址栏展开/收起时会跳变，更稳的方式是监听resize事件动态更新高度，或改用sticky+ 父容器min-height: 100vh
移动端收起/展开时的过渡动画怎么写才不卡顿
直接用 display: none 或改 width 会导致布局重排，动画生硬甚至闪屏。CSS transition 只对部分属性有效，display 不在其中，width 在 flex 容器中还可能被 flex-basis 覆盖。
- 推荐用
transform: translateX(-100%)隐藏，配合transition: transform 0.3s ease - 隐藏时加
pointer-events: none，防止点击穿透；展开时恢复pointer-events: auto - Overlay 层必须存在且覆盖全屏，
z-index高于侧边栏但低于其他弹窗；点击 Overlay 关闭时，事件应绑定在 Overlay 自身，而非body - 不要用 JavaScript 动态计算宽度后写
style.width——SSR 渲染首屏会错乱，且无 CSS fallback
实际最易忽略的是：快捷操作栏语义上不属于导航（nav），也不完全是补充信息（aside），它更接近全局操作入口。建议用 <div role="region" aria-label="快捷操作栏"> 包裹，既保持无障碍支持，又避开语义标签的结构约束。</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
