纯CSS实现响应式侧边栏抽屉可行但仅适用于单次切换轻量场景；它避免闪动、支持键盘和屏幕阅读器，却无法监听状态、自动关闭或适配横竖屏快速切换，Esc键和遮罩外点击关闭等需JS补足。
纯 CSS 实现响应式侧边栏抽屉效果可行，但只适合“单次切换 + 无状态联动”的轻量场景；它能避免首次渲染闪动、天然支持键盘和屏幕阅读器，但无法监听开闭状态、不能自动关闭、也不适配横竖屏快速切换。
为什么用 input[type="checkbox"] 而不是 JS 切换 class
因为 input[type="checkbox"] 是语义化可访问控件，浏览器原生支持空格键切换、焦点管理、aria-checked 自动同步；纯 CSS 方案不依赖 JS 执行时机，DOM 渲染完成就能响应点击，规避了 JS 加载延迟导致的“点不动”问题。但代价是：它只能做单向触发，无法在抽屉打开时自动监听 Esc 键或点击遮罩外区域——这些必须靠 JS 补足。
:checked ~ .sidebar 选择器失效的三个常见原因
这个选择器看似简单，实际对 DOM 结构极其敏感：
-
input必须和.sidebar、.overlay在同一父容器下，且input要写在它们前面——否则~找不到后续兄弟元素 -
label不能包裹.sidebar或.overlay，否则它们变成input的子元素，不再是兄弟节点 -
input不能设display: none，得用position: absolute; left: -9999px隐藏，否则部分屏幕阅读器会跳过它
transform: translateX(-100%) 没完全隐藏？先查这三件事
位移不到位不是动画问题，而是计算基准出错：
立即学习“前端免费学习笔记（深入）”；
- 侧边栏必须有明确
width（如width: 280px），否则-100%按父容器宽度算，不是自身宽度 - 别混用
vw和%：translateX(-100vw)在有滚动条时会露边，应统一用translateX(-280px)或确保父容器box-sizing: border-box -
position必须是fixed或absolute，static元素用translateX会影响文档流，可能触发意外重排
遮罩层 .overlay 点击无效的硬性条件
遮罩不是装饰，它是关闭入口和防穿透的关键，以下四点缺一不可：
-
.overlay必须设position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;—— 用100%会按父容器高度算，常导致下半截不可点 -
z-index必须比侧边栏低一级（如侧边栏z-index: 1000，遮罩设z-index: 999），否则点击直接穿透到背后 -
.overlay要是label，且绑定同一个input的for属性，否则点击不会触发:checked状态翻转 - 加
cursor: pointer，某些安卓 WebView 下没这个声明，点击区域响应会明显变迟钝
真正难的不是让它滑出来，而是关掉后焦点没回跳、键盘 Tab 顺序断了、屏幕阅读器读不出状态变化——这些纯 CSS 做不到，必须靠 aria-expanded 和少量 JS 协同管理。
