必须用transform:translateX()而非left或margin-left，因其走GPU合成层、不触发重排，避免低端Android和iOS Safari掉帧、白屏；需配合fixed/absolute定位、明确width、-100vw位移、transition写在默认状态及正确遮罩层样式。
纯 CSS 实现响应式侧边栏抽屉，核心不是“能不能做”，而是“怎么避开那些让动画卡死、点击失效、滚动穿透的坑”。用 transform: translateX() 是唯一可行路径，其他方案在 iOS Safari 或低端 Android 上大概率掉帧、白屏或误关。
为什么必须用 transform: translateX() 而不是 left 或 margin-left
改 left 或 margin-left 会触发重排（reflow），每次动画帧都要重新计算整个布局树；transform: translateX() 走 GPU 合成层，只影响绘制，不干扰文档流。实测在 Redmi Note 9 上，left 动画平均帧率仅 32fps，translateX() 稳定在 58–60fps。iOS Safari 开发者工具里还会对非 transform/opacity 动画抛黄色警告——left 正中靶心。
-
translateX(-100%)不可靠：父容器宽度不确定时，100% 没意义；推荐translateX(-280px)（前提是侧边栏有明确width: 280px） - 不能对
position: static元素直接用translateX()；必须设position: fixed或position: absolute - 别写
transition: all 0.3s——它会让z-index、visibility等属性也参与过渡，导致遮罩层错位或动画中断
input[type="checkbox"] + :checked 结构为什么总失效
这个方案不是“可选”，而是目前唯一能兼顾无障碍（键盘空格触发、屏幕阅读器识别）、JS 失效兜底、且零初始化的纯 CSS 状态开关。但 DOM 结构错一丁点就全盘崩溃。
-
input和抽屉容器（如.sidebar）必须是同级兄弟节点，且中间不能有任何标签、空格或注释 - 必须用
~（通用兄弟选择器），不能用+（相邻兄弟）：#menu:checked ~ .sidebar才有效 -
input必须有id，对应遮罩层或触发按钮的label[for]；display: none不影响功能，但不能用visibility: hidden或opacity: 0（会失去焦点能力）
遮罩层（.overlay）点不关闭？先查这三处
90% 的“点击遮罩无反应”问题，根源不在 JS，而在样式占位或层级断裂。
立即学习“前端免费学习笔记（深入）”；
-
.overlay必须是position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;——用100%是错的，它相对父容器，不是视口 -
z-index要比抽屉低 1（如抽屉z-index: 1000，遮罩z-index: 999），但高于主内容；同时确保没被某个position: relative父容器截断堆叠上下文 - 加
cursor: pointer和background-color: rgba(0,0,0,0.5)；透明度低于0.3容易点击穿透，尤其在部分安卓 WebView 下
移动端滚动穿透和 body 锁死为什么不管用
body { overflow: hidden } 在 iOS Safari 15+ 上经常被忽略，这不是 bug，是浏览器对 overflow 的宽松策略。光靠它锁不住背景滚动。
- 抽屉打开时，给
body加 class（如drawer-open），CSS 写成：.drawer-open { position: fixed; width: 100%; height: 100%; overflow: hidden; } - 侧边栏容器自身必须设
overflow-y: auto和明确高度（如height: 100vh或min-height: 100vh），否则内容一多就撑出屏幕 - 如果侧边栏用了 flex 布局，内部滚动区域要加
min-height: 0，防止 flex 项撑高容器导致滚动失效
最易被忽略的点：iOS Safari 对 transform + fixed 的渲染偶尔有合成层 bug，建议在抽屉激活时动态加 will-change: transform（不要常驻），上线前可降级为 transform: translateZ(0)。还有，别在动画过程中同时改 width 或 display，那等于主动破坏 GPU 合成。
