必须为主内容区设置 margin-left，值严格等于侧边栏实际视觉总宽（含 border、padding 等），否则 fixed 侧边栏会遮挡内容；因 fixed 元素脱离文档流，主内容默认从视口左上角渲染。
必须给主内容区加 margin-left（或 padding-left），值严格等于侧边栏的视觉总宽，否则遮挡是必然的。
为什么 fixed 侧边栏一定遮内容
因为 position: fixed 元素完全脱离文档流，浏览器渲染主内容时根本“看不见”它。你写了 aside { position: fixed; left: 0; top: 0; width: 250px; }，但紧随其后的 main 还是从视口左上角开始画——文字、按钮、表单全叠在侧边栏下面。这不是 bug，是 CSS 规范的必然行为。
主内容该加 margin-left 还是 padding-left？加多少？
优先用 margin-left，它不影响内部盒模型计算，也兼容 width: auto 或 width: 100% 的主内容容器。
- 值必须等于侧边栏的**实际视觉宽度**：含
border、padding、甚至font-size导致的行高影响（比如250px是纯内容宽，但侧边栏设了padding: 16px和border: 1px solid，总宽就是250px + 32px + 2px = 284px） - 推荐用 CSS 变量统一管理：
:root { --sidebar-width: 284px; }，然后main { margin-left: var(--sidebar-width); } - 别用
body { padding-left: 284px }—— 它会让scrollHeight、IntersectionObserver和getBoundingClientRect()计算失准
侧边栏自身定位和层级常见失效点
设了 z-index: 999 却被盖住？大概率是祖先节点“造了新层”，让 fixed 元素被锁死在局部堆叠上下文中。
立即学习“前端免费学习笔记（深入）”；
- 以下任一属性都会触发新堆叠上下文：
transform（哪怕只是translateZ(0)）、opacity: 0.99、filter: blur(1px)、will-change、isolation: auto - 真机调试时，在 Safari 开发者工具里检查 computed 样式，确认
position仍是fixed，没退化成static - 侧边栏别嵌在
display: flex的父容器里——flex 容器可能截断 fixed 的定位参考系；直接挂到body下最稳妥
响应式收起/展开时怎么避免布局抖动
用 width 动画 + overflow: hidden 是目前最可控的方式，比 max-width 或 clip-path 更稳定。
- 收起状态设
width: 0; overflow: hidden;，展开时过渡到width: var(--sidebar-width); - 避免用
display: none切换——会导致 DOM 重排，margin-left需同步手动改，容易漏或错位 - 如果侧边栏高度不确定（比如含动态列表），别依赖
height: 100vh，改用inset: 0 0 0 0（等价于top: 0; right: 0; bottom: 0; left: 0）更可靠
真正难处理的不是怎么写 position: fixed，而是让它的定位空间、层级、响应行为三者不互相打架。尤其是当侧边栏要支持滚动、收展、暗色模式切换时，margin-left 的值、CSS 变量作用域、堆叠上下文边界，这三个点最容易被忽略。
