bootstrap中侧边栏遮罩层必须置于.sidebar外部且同级，用position:fixed+100vw/100vh覆盖全屏，z-index设为1040（高于主内容1030、低于侧边栏），并配合body滚动锁class控制，避免遮挡滚动条。
侧边栏展开时遮罩层怎么加才不遮挡滚动条
遮罩层 .sidebar-backdrop 必须放在 .sidebar 外部且同级，不能嵌套在侧边栏内部。否则当侧边栏内容超出视口高度时，遮罩会盖住右侧主内容区的滚动条，导致无法滚动——这是最常见的布局陷阱。
- 遮罩层需用
position: fixed覆盖全屏，z-index值设为比侧边栏低（如z-index: 1040），但高于主内容（主内容通常z-index: 1030） - 宽度/高度必须设为
100vw和100vh，而非100%，避免因父容器限制导致遮罩不全 - 点击遮罩应触发关闭逻辑：
document.querySelector('.sidebar-backdrop').addEventListener('click', () => sidebar.classList.remove('show'))
阴影效果用 box-shadow 还是 backdrop-filter
纯视觉阴影推荐用 box-shadow，它兼容所有现代浏览器且性能稳定；backdrop-filter: blur() 虽能做出毛玻璃遮罩，但 Safari 旧版和部分安卓 WebView 不支持，且开启后可能触发额外图层合成，造成低端机卡顿。
- 侧边栏自身加阴影：
box-shadow: 0 0 20px rgba(0,0,0,.15)，注意不要用太强的模糊值（如40px），否则在小屏上显得臃肿 - 遮罩层本身不加阴影，它只是半透明层：
background-color: rgba(0,0,0,.5) - 如果非要毛玻璃效果，只对遮罩层加
backdrop-filter: blur(2px)，并搭配-webkit-backdrop-filter前缀
响应式断点下侧边栏是否需要遮罩
Bootstrap 的 md 及以上断点（≥768px）通常不启用遮罩——因为侧边栏此时是常驻状态，不是“模态展开”，加遮罩反而干扰用户操作。遮罩只应在 sm 或 xs 下、侧边栏以 offcanvas 方式弹出时生效。
- 用 Bootstrap 5 的
offcanvas组件时，它自带.offcanvas-backdrop，无需手写遮罩层 - 若自行实现，建议通过
window.matchMedia('(max-width: 767.98px)')动态控制遮罩显隐，避免在桌面端误触发 - 遮罩的
transition时间要和侧边栏一致（如.3s ease），否则会出现“先闪一下再动”的割裂感
移动端点击遮罩关闭后 body 滚动锁怎么解
遮罩显示时，常有人给 加 overflow: hidden 防止背景滚动，但关闭后忘记恢复，导致整个页面卡死——这是最隐蔽也最常被忽略的问题。
- 打开遮罩时：记录原始
document.body.style.overflow，再设为'hidden' - 关闭遮罩时：必须还原该值，而不是直接设回
'auto'（因为用户可能原本就设了'scroll'或其他值） - 更稳妥的做法是用 class 控制：
document.body.classList.add('modal-open')，CSS 中定义.modal-open { overflow: hidden; }，关闭时移除 class 即可
z-index、position 和 body 滚动状态这三点，任何一个没对齐，都会让效果看起来“差点意思”。
