固定侧栏遮挡右侧内容的根本原因是其脱离文档流且定位基准异常：左侧需用inset:0+width显式控制，右侧须用严格匹配的margin-left、min-height:100vh、height:calc(100vh-60px)+overflow-y:auto，并包裹在独立容器内，同时注意父级transform触发新包含块及flex子项需设min-height:0。
固定侧栏遮挡内容，不是 z-index 没设够，而是它脱离文档流后，右侧内容根本没“知道”它占了多宽——你给 main 加 margin-left: 200px 看似合理，但一旦侧栏高度超视口、缩放页面或 Safari 下软键盘弹出，这个值就失效。
为什么 fixed 左侧菜单总盖住右边内容
因为 position: fixed 让侧栏完全脱离文档流，它的定位参考是视口（viewport），而不是父容器。如果侧栏父级有 transform、filter 或 perspective，还会触发新包含块（containing block），导致定位偏移——这时你看到的“错位”，其实是它在错误的祖先元素内定位。
- 用浏览器开发者工具检查侧栏的
Computed面板，看Containing Block是不是html或body；如果不是，往上查哪个父元素加了transform: translateZ(0)这类“隐形陷阱” -
z-index失效往往不是数值不够大，而是侧栏和目标元素不在同一层叠上下文里——比如某个中间父级设了z-index: 1却没设position，就悄悄创建了隔离层 - 移动端 Safari 对
fixed支持脆弱，地址栏收起/弹出、软键盘唤起时，侧栏可能突然“飘走”
左侧 fixed 菜单 + 右侧可滚动内容的标准写法
核心原则：左侧定宽定高可控，右侧主动让出空间并接管滚动权，不依赖 body 滚动。
- 左侧容器必须显式设
width（如240px），且用inset: 0替代零散的top/left/bottom/right，更简洁不易漏 - 右侧主内容区必须包裹在独立容器里（如
<main></main>），不能直接对body设margin-left——否则滚动条会出现在整页，而非仅内容区 - 右侧容器设
margin-left: 240px（严格匹配侧栏宽度），再加min-height: 100vh防止内容少时塌陷 - 右侧内容自身要可滚动：
height: calc(100vh - 60px)（减去顶部 header 高度），overflow-y: auto，并配overscroll-behavior-y: contain防止滚到底还穿透到背景页
scroll-margin-left 不适用于侧栏场景
scroll-margin-top 解决锚点跳转时被顶部导航栏遮挡，但它只作用于滚动终点的元素顶部留白，对左侧 fixed 菜单无效——没有 scroll-margin-left 这个 CSS 属性，别被名字误导。
想让右侧内容“感知”侧栏宽度，只能靠显式尺寸对齐或 JS 动态读取（如 getBoundingClientRect()）。纯 CSS 下，唯一可靠路径就是：侧栏宽度固定、右侧 margin-left 严格同步、滚动行为收束到右侧容器内部。
最易忽略的点：右侧容器若用了 Flex 布局，子项必须设 min-height: 0，否则 flex item 默认不收缩，overflow-y: auto 就不会生效——看起来像“滚动失效”，其实是高度计算卡住了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
