fixed侧边栏被遮住因父容器创建层叠上下文导致z-index失效；应设自身z-index并清除上级非static定位的z-index；left/right勿共存；主内容需留白防遮挡；iOS闪动可加backface-visibility:hidden。
fixed定位侧边栏为什么总被遮住
因为 z-index 默认值是 auto，父容器如果有非 static 定位（比如 relative）且设了 z-index，就会形成新的层叠上下文，把子元素的 z-index “锁死”在内部。侧边栏即使写了 z-index: 9999，也可能被卡在某个父块里出不来。
实操建议：
- 给侧边栏自身加
position: fixed和足够大的z-index（比如9999） - 检查它所有上级元素，尤其是直接父容器——如果用了
position: relative或absolute且设置了z-index，就把它干掉，或者至少设成z-index: auto - 浏览器开发者工具里选中侧边栏，看“Computed”面板里的
z-index是否生效；如果显示auto，说明被层叠上下文截断了
left/right/top/bottom怎么选才不打架
侧边栏贴右或贴左，本质是用 left 或 right 配合 top 控制起始位置，但别乱设 left 和 right 同时为 0——那样会拉伸宽度，不是悬浮效果。
常见错误现象：侧边栏宽到占满整个视口，或者突然消失。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 贴左固定栏：用
left: 0+top: 0（或具体偏移值），别碰right - 贴右固定栏：用
right: 0+top: 0，别碰left - 如果想留点边距（比如离右边缘 20px），写
right: 20px，而不是right: 0; width: calc(100% - 20px)——后者在小屏下容易溢出 - 高度控制推荐用
height: 100vh，不是100%，避免因父容器高度塌陷导致侧边栏变短
滚动时内容被遮挡怎么办
固定定位元素不会随页面滚动，但主内容区域如果没预留空间，就会被侧边栏盖住——这不是 z-index 问题，是布局侵占。
使用场景：侧边栏宽度 300px，右侧主内容需要从 300px 开始排布，否则文字一滚动就钻进侧边栏底下。
实操建议：
- 给主内容容器加
margin-left: 300px（贴左侧边栏）或margin-right: 300px（贴右侧） - 更稳妥的做法是用
padding配合box-sizing: border-box，避免 margin 在某些 flex/grid 布局中失效 - 如果主内容用了
position: absolute或grid-area，那得直接调它的定位参数，不能只靠 margin - 移动端要考虑响应式：用媒体查询在小屏下把侧边栏设为
display: none或改用汉堡菜单，别硬撑 300px
fixed定位在iOS Safari里闪动或错位
iOS Safari 对 position: fixed 的实现有历史遗留问题，尤其在地址栏收放、输入框聚焦、页面缩放时，侧边栏可能跳动、偏移甚至短暂消失。
性能影响：强行用 transform: translateZ(0) 或 will-change: transform 可能触发硬件加速，但也可能加剧重绘抖动。
实操建议：
- 给侧边栏加
backface-visibility: hidden，比translateZ(0)更轻量，对 iOS 兼容性更稳 - 避免在侧边栏内放大量动画或频繁重绘的内容（比如实时图表、不停轮播的图）
- 测试时真机必跑：模拟器看不出地址栏收放带来的 offset 变化
- 如果必须支持 iOS 旧版本（position: sticky + 容器高度撑满，虽然不是真正“悬浮”，但行为更可控
侧边栏看着简单，但 fixed + z-index + iOS 兼容这三块叠在一起，任何一个疏忽都会让效果在某个环节断掉。最常被忽略的是层叠上下文和移动端 viewport 行为差异——别等上线后用户截图说“点不动”，先在真机上滚三遍。
