如何解决CSS侧边栏固定后内容被遮挡

fixed侧边栏盖住主内容是因为它脱离文档流，主内容未主动让出左侧空间；需给主内容设margin-left或width:calc()，侧边栏须声明top/left、width和z-index，并注意移动端包含块及overflow问题。

fixed侧边栏为什么盖住主内容

因为 position: fixed 让侧边栏完全脱离文档流，浏览器渲染主内容时根本“看不见”它，主内容就从视口左上角开始布局——结果文字直接从侧边栏底下穿过去。这不是 z-index 没设对，而是布局逻辑没对齐。

主内容必须主动让出左侧空间

不能指望侧边栏“自己退开”，得让主内容区（比如 .main）明确留白：

1. 给 .main 加 margin-left: 250px（值 ≈ 侧边栏宽度 + 10px 余量）
2. 或者用 width: calc(100% - 250px)，避免撑满整个视口
3. 若用 CSS Grid，更稳妥：grid-template-columns: 250px 1fr，再把侧边栏提为 position: fixed 并用 inset: 0 auto 0 0 约束范围

侧边栏自身定位必须显式声明

只写 position: fixed 不够，缺了坐标就会塌陷或偏移：

1. top: 0 和 left: 0（或 right: 0）必须同时存在
2. 显式设 width: 250px，别依赖内容撑开，否则响应式下容易错乱
3. 加 z-index: 100 —— 不是可选项，是必需项，否则可能被其他非 fixed 元素盖住

移动端和层叠上下文容易踩坑

侧边栏在 iOS Safari 或小屏设备上突然失效、点击无响应、滚动卡顿，往往不是代码问题，而是环境干扰：

1. 检查所有祖先元素是否用了 transform、filter 或 will-change —— 它们会创建新包含块，导致 fixed 相对父容器而非视口定位
2. 避免在 body 上设 overflow: hidden，这会破坏 iOS 的原生滚动惯性
3. 如果侧边栏高度超视口，必须加 overflow-y: auto 和 min-height: 100vh，否则内容被截断

真正麻烦的从来不是写几行 position: fixed，而是侧边栏一旦脱离文档流，所有周边元素的尺寸、定位、层叠关系都得重新校准——漏掉任意一环，遮挡就藏在看似正常的代码里。