右侧内容被左侧固定导航遮挡，是因为 fixed 元素脱离文档流，主内容需手动让出空间：设 margin-left 与侧边栏 width 一致；或用 flex 布局，父容器 display: flex、侧边栏 flex: 0 0 240px、主内容 flex: 1；收起时用 transform + transition，避免 display: none。
右侧内容被左侧固定导航遮挡，不是导航没“固定”好，而是主内容根本不知道左边有块固定区域——它还在按普通文档流从左上角开始渲染。
用 position: fixed 时，主内容必须手动让出空间
fixed 元素完全脱离文档流，右侧内容不会自动绕开。常见错误是只设了 .sidebar { position: fixed; width: 240px; }，却忘了告诉主内容：“你左边 240px 是禁区”。
- 主内容区（比如
<main></main>或<div class="content">）必须加 <code>margin-left: 240px，且这个值要和侧边栏的width完全一致 - 如果主内容本身有滚动条，需确保
html, body { overflow-y: scroll; }，否则height: 100vh在 Safari 中可能计算错误导致底部留白或溢出 - 不要给主内容设
width: 100%，它会和margin-left叠加，造成横向滚动 - 父容器（如
或外层<div class="app">）设 <code>display: flex; min-height: 100vh; - 侧边栏设
flex: 0 0 240px;（不缩放、不增长、宽固定） - 主内容区必须设
flex: 1;，等价于flex: 1 1 0;，这才是真正“填满剩余空间”的逻辑 - 避免在主内容内部再用
width: 100%，它可能和 flex 计算冲突，尤其嵌套多层时 - 改用
transform: translateX(-100%)隐藏侧边栏，并配transition: transform 0.3s ease; - 主内容区不要依赖
margin-left，而应走 flex 布局——这样侧边栏隐藏后，主内容自动撑满，无需额外样式切换 - JavaScript 控制开关时，只操作类名（如
document.body.classList.toggle("sidebar-collapsed")），别直接写style.display = "none"
用 display: flex 更健壮，但子元素行为必须显式声明
flex 布局下，右侧内容不会被遮挡，但新手常误以为只要父容器设 display: flex 就万事大吉——其实关键在子项的 flex 值。
响应式收起侧边栏时，主内容过渡不能靠 display: none
直接对侧边栏切 display: none，主内容会瞬间跳到左边，毫无过渡感。CSS transition 对 display 不生效。
立即学习“前端免费学习笔记（深入）”；
最易被忽略的点：侧边栏内部若需局部滚动（比如菜单过长），不能只给侧边栏设 overflow-y: auto，还得确保它的高度来源明确——要么父 flex 容器有 min-height: 100vh，要么侧边栏自己设 height: 100vh 并配合 box-sizing: border-box，否则滚动可能失效或错位。
