应给右侧内容容器设置 margin-left 等于侧边栏宽度（如250px），确保其避开 fixed 侧边栏；侧边栏需明确定宽，避免依赖 fit-content；Bootstrap 的 sticky-top/fixed-top 不适用于左侧，须用 position: fixed + height: 100dvh；移动端注意 iOS Safari 的 viewport 高度问题及抖动优化。
侧边栏用 position: fixed 但内容被遮挡怎么办
固定左侧菜单后，右侧内容常被压在下面，滚动时文字从菜单底下穿过去——这不是 js 问题，是 css 层叠和定位没配平。
关键不是“怎么固定”，而是“固定之后怎么让内容避开它”。fixed 元素脱离文档流，右侧区域默认从页面左上角开始渲染，必须手动留出左侧宽度空间。
- 给右侧内容容器加
margin-left，值等于左侧侧边栏的宽度（比如250px） - 确保左侧侧边栏有明确宽度（别依赖
fit-content或未设宽的div），否则margin-left不好配 - 如果用了 Bootstrap 的
container或container-fluid，记得这个 margin 要加在容器外层，而不是内部元素上
Bootstrap 5 中 sticky-top 和 fixed-top 能不能用来做侧边栏
不能直接用。这两个工具类专为顶部导航设计，sticky-top 依赖父容器高度和滚动方向，fixed-top 固定在 viewport 顶部，对左侧无意义。
想用原生 Bootstrap 类简化开发，唯一可行的是放弃“全高固定”，改用 sticky-top + 高度受限的侧边栏（比如只固定在某个 section 内），但这就不是用户要的“始终可见的左侧菜单”了。
-
sticky-top必须配合top: 0和有明确 height/overflow 的父容器才生效，且只在父容器内 sticky -
fixed-start这类类名并不存在于 Bootstrap 5 或 6 官方 CSS 中，别搜了 - 真要省事，就老实用
position: fixed; top: 0; left: 0; height: 100vh;配合overflow-y: auto
右侧内容滚动但不带动左侧菜单，为什么菜单有时会抖动或错位
抖动通常来自两个地方：一是 fixed 元素没设 transform: translateZ(0) 导致合成层缺失；二是父容器用了 transform、perspective 或 filter，意外创建了新的 stacking context，把 fixed 元素“钉”在了错误层级。
- 给左侧侧边栏加
transform: translateZ(0)或will-change: transform，强制 GPU 加速，减少重绘抖动 - 检查 body 或 wrapper 是否加了
transform: scale(1)、filter: opacity(1)等——这些会让fixed行为退化为 relative - 移动端 Safari 对
fixed支持较弱，如果测试时只在桌面正常，务必真机验证；可加viewportmeta 的width=device-width, initial-scale=1, shrink-to-fit=no缓解
如何让固定侧边栏在小屏自动收起，又不影响桌面布局逻辑
别用 JS 切换 display: none，那会破坏 fixed 布局流。应该用 Bootstrap 的响应式显示工具类 + 合理的断点控制。
- 给左侧菜单加
class="d-none d-md-block"，让它在md（768px）及以上显示，小屏隐藏 - 右侧内容不用额外处理，因为它的
margin-left在小屏下应设为0，用ms-md-5（Bootstrap 5）或ms-md-xxl类替代硬编码像素值 - 如果要用汉堡菜单展开，确保 toggle 按钮和侧边栏不在同一个 stacking context，否则点击后菜单可能被遮在底部——给按钮加
z-index: 1050，菜单加z-index: 1040
最易被忽略的一点：fixed 侧边栏的 height: 100vh 在 iOS Safari 中可能算不准，因为地址栏显隐会改变 viewport 高度。真要稳，得用 100dvh（现代浏览器支持），或者 JS 动态设高度——但后者就绕不开 resize 监听和防抖，复杂度立刻上去。
