需为主内容设置 margin-left（或 padding-left）等于侧边栏总宽度（含 border/padding），避免被遮挡；fixed 侧边栏本不随页面滚动，若需滚动后固定应改用 sticky；勿将其置于 flex 容器内，推荐挂载到 body 下；响应式收展优先用 width 动画配合 overflow: hidden。
fixed 侧边栏导致内容被遮挡怎么办
直接加 position: fixed 后，主内容区域常被侧边栏盖住——这不是 CSS 写错了，是没给主内容留出「让位空间」。
常见错误现象：margin-left 没设、或设了但值小于侧边栏实际宽度；滚动时侧边栏卡在顶部不动，但内容从左上角开始渲染，直接叠在它下面。
- 侧边栏宽度为
240px，主内容区域必须至少有margin-left: 240px（或padding-left，取决于布局结构） - 如果侧边栏用了
box-sizing: border-box或含border/padding，记得把它们算进总宽里 - 别用
left: 0+width: 100%组合，这会让 fixed 元素撑满视口，反而更难对齐
滚动时侧边栏和内容不同步滚动怎么修
position: fixed 本意就是脱离文档流、相对视口定位，所以它不随页面滚动——这其实是正确行为，问题往往出在「你误以为它该跟着滚」。
使用场景：后台页通常需要菜单始终可见，正该用 fixed；若要「随内容一起滚」，那就不该用 fixed，而该用 sticky 或普通文档流布局。
立即学习“前端免费学习笔记（深入）”；
- 确认需求：是「永远钉在左边」还是「滚到顶部后才固定」？前者用
fixed，后者优先用position: sticky; top: 0 -
fixed元素不会触发父容器的overflow隐藏，所以即使主内容设了overflow-y: auto，侧边栏也不受影响 - 移动端要注意：
fixed在 iOS Safari 旧版本中可能表现异常，建议加transform: translateZ(0)强制硬件加速
fixed 侧边栏在 flex 布局里失效的原因
把 position: fixed 元素放进 display: flex 容器时，它会脱离 flex 上下文，不再受 flex-direction 或 align-items 控制——不是 bug，是规范行为。
参数差异：flex 容器的子元素默认是「flex item」，但 fixed 元素自动变成「absolutely positioned box」，flex 属性对它完全无效。
- 不要把
fixed侧边栏写成 flex 容器的直接子元素；把它提到 body 下一级更稳妥 - 如果必须保留在某个 DOM 结构里，可用
visibility: hidden+ 占位元素维持 flex 布局高度，再用fixed覆盖上去 - 注意 z-index：
fixed元素会创建新层叠上下文，若父容器有transform或opacity，可能意外截断它的层级
如何让 fixed 侧边栏响应式收缩/展开
靠纯 CSS 实现收展时，width 动画配合 overflow: hidden 最可靠；用 transform: scaleX() 看似简洁，但会导致内部文字模糊、焦点元素错位。
性能影响：width 变更会触发 layout，但现代浏览器优化得不错；transform 虽不触发布局，但缩放后子元素渲染质量下降，尤其小字号菜单项。
- 收起状态推荐设为
width: 64px（刚好容下图标），展开为width: 240px，过渡用transition: width 0.25s ease - 必须加
white-space: nowrap和overflow: hidden，否则文字换行会撑开容器 - JavaScript 控制时，别直接操作
style.width，改用 class 切换，方便复用和维护
