纯CSS侧边抽屉最稳方案是position: fixed配合transform: translateX，用checkbox+label实现无JS开关，需注意z-index、overflow-x:hidden、viewport设置及@supports降级。
HTML 侧边抽屉用 position: fixed + transform 最稳
纯 CSS 实现侧滑抽屉，不依赖 JS 框架时，position: fixed 是关键。它让抽屉脱离文档流、不占位、不触发重排，同时能精准覆盖在内容层之上。配合 transform: translateX(-100%) 隐藏，translateX(0) 显示，动画顺滑且性能好——浏览器对 transform 的硬件加速支持比 left 或 margin-left 更可靠。
常见错误是用 display: none 切换，结果点击后闪一下才出现；或用 visibility: hidden 导致仍占空间、遮不住主内容。务必确保抽屉的 z-index 高于主内容（比如 z-index: 1000），且主内容加 overflow-x: hidden 防止横向滚动条意外出现。
用 checkbox + label 实现无 JS 开关逻辑
想免 JS 又要响应式开关？<input type="checkbox"> 配合 <label> 是成熟方案。把 checkbox 放在抽屉容器外（甚至 display: none 隐藏），label 的 for 指向它，点击 label 就触发状态切换。再用 CSS 的 :checked 伪类控制抽屉位移：
<input type="checkbox" id="drawer-toggle">
<label for="drawer-toggle">☰</label>
<aside class="drawer">...</aside>
.drawer {
transform: translateX(-100%);
transition: transform 0.3s ease;
}
#drawer-toggle:checked ~ .drawer {
transform: translateX(0);
}
注意三点：~ 是后续兄弟选择器，所以 <input> 必须在 <aside> 前面；transition 要写在未选中状态上，否则首次打开无动画；移动端需加 touch-action: manipulation 防止点击延迟。
立即学习“前端免费学习笔记（深入）”；
移动端适配：必须加 viewport 和触摸穿透处理
没加 <meta name="viewport" content="width=device-width, initial-scale=1">，抽屉宽度会错乱，尤其 iOS Safari。另外，抽屉展开时，背后主内容默认仍可滚动、可点击——这不是 bug，是浏览器默认行为。解决方法：
- 抽屉激活时给
<body>加 class，如body.drawer-open { overflow: hidden; } - 抽屉内部链接或按钮若需点击，确保它们不是
pointer-events: none（某些“遮罩层”误设） - 避免在抽屉里放
iframe或video，iOS 上可能触发全屏或失去焦点
兼容老浏览器？别硬扛，用 @supports 降级
IE11 不支持 transform: translateX 的部分语法（比如百分比值在某些版本下失效），但强行加 polyfill 得不偿失。更实际的做法是用 @supports 提供备选：
.drawer {
left: -300px;
transition: left 0.3s;
}
@supports (transform: translateX(0)) {
.drawer {
left: auto;
transform: translateX(-100%);
}
#drawer-toggle:checked ~ .drawer {
transform: translateX(0);
}
}
这样 IE11 回退到 left 方案（功能完整，只是动画略卡），现代浏览器走 transform。别为 IE 写两套逻辑，@supports 就够用。
抽屉的宽度、阴影、背景模糊这些视觉细节容易调，但真正卡住人的往往是 body 滚动锁定时机、focus 管理、以及 iOS 上 touchstart 和 click 的触发顺序——这些点不写 JS 几乎没法完美处理，该用轻量 JS 就别硬撑纯 CSS。
