fixed侧边栏问题根源是父容器触发新包含块，导致定位基准异常；小屏需媒体查询降级为static；高度应设100vh+overflow-y:auto；iOS卡顿需GPU加速并简化样式。
fixed侧边栏在滚动时被遮挡或错位
根本原因是 position: fixed 脱离文档流后，其定位基准是视口（viewport），但若父容器设置了 transform、perspective 或 will-change，会触发新的层叠上下文或包含块，导致 fixed 元素相对该容器定位而非视口。常见于使用 Vue/React 框架的布局组件、或加了动画效果的 wrapper。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查侧边栏所有上级元素，用浏览器开发者工具的“Computed”面板看是否意外触发了
transform: translateZ(0)或will-change: transform—— 这类声明必须删掉或改用opacity等不创建新 containing block 的属性 - 确保侧边栏直接挂载在
下（如用 React Portal），或至少父级没有overflow: hidden+transform组合 - 若必须保留父级 transform，改用
position: sticky替代（需配合top: 0和有高度的容器）
移动端小屏下 fixed 侧边栏挤占内容区域
fixed 元素默认不参与流式布局，宽度写死（如 width: 240px）会在手机上直接盖住主内容，且无法滑动查看被遮部分。这不是 bug，是 fixed 的行为本质。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用媒体查询在小屏强制关闭 fixed 行为：
@media (max-width: 768px) { .sidebar { position: static; width: 100%; height: auto; } } - 避免在 mobile 上依赖
left: 0+width控制位置，改用 flex 布局收拢为顶部导航或汉堡菜单 - 如果坚持要小屏 fixed，必须搭配
right: 0或left: auto并设max-width: 80vw，否则 iOS Safari 会因 viewport 缩放异常导致定位漂移
fixed 侧边栏高度无法随内容撑开
position: fixed 的元素高度不会响应内部内容增长，默认按内容最小高度渲染，滚动时底部内容会被截断。尤其当侧边栏含动态加载的菜单或折叠面板时极易出问题。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 显式设置
height: 100vh（注意：不是100%），并用overflow-y: auto让内部可滚动 - 若页面有固定头部（如 64px 高），改用
height: calc(100vh - 64px)，但需确保该值在 JS 动态修改 header 高度后同步更新（CSS 无法监听 JS 变化） - 不要依赖
min-height: 100vh—— 在 iOS Safari 中，它可能因地址栏显示/隐藏导致视口高度跳变，造成滚动条抖动
fixed 元素在 iOS Safari 中滚动卡顿或闪烁
iOS Safari 对 fixed 定位元素的合成层处理较敏感，尤其当侧边栏含阴影（box-shadow）、圆角（border-radius）或半透明背景（rgba()）时，容易触发频繁重绘，表现为滚动粘滞或白屏闪烁。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给 fixed 侧边栏加
backface-visibility: hidden和transform: translateZ(0)强制 GPU 加速（注意：仅对侧边栏自身加，别加到父级） - 把
box-shadow换成单侧border或使用伪元素模拟，减少合成层复杂度 - 避免在 fixed 元素内使用
will-change: transform—— 它会让 Safari 放弃优化，反而更卡
实际最麻烦的不是怎么写 CSS，而是 fixed 侧边栏一旦嵌进某个已有框架或 CMS 主题里，你根本不知道哪个祖先元素悄悄加了 transform 或 overflow: hidden。这时候得一层层往上查 computed style，而不是盯着自己的 sidebar 样式调。
