侧边栏应采用 checkbox + label 的纯 css 方案实现：input[type="checkbox"] 静态置于 dom 开头，label 作为触发按钮，aside.sidebar 与之同级；通过 :checked ~ .sidebar 控制 transform: translatex() 动画，并配合适当的 z-index 和 pointer-events 确保遮罩与交互正确。
手机端侧边栏点击滑出的 DOM 结构怎么搭
必须让侧边栏初始不可见但可交互，不能用 display: none，否则 transition 会失效。常见错误是直接隐藏整个 aside 或 .sidebar，结果点击后“闪现”而非滑出。
- 侧边栏容器用
position: fixed（或absolute），宽设死（如width: 280px），左定位为left: -280px - 加
transition: left 0.3s ease—— 注意只过渡left，别写成all，否则阴影、透明度变化也会被拖慢 - 触发按钮和侧边栏之间**不要依赖 JS 动态插入 DOM**，结构得静态存在，否则 iOS Safari 可能不触发硬件加速
用 checkbox + label 实现无 JS 滑出（最稳方案）
纯 CSS 方案里，<input type="checkbox"> 配合 :checked 伪类是最可靠的选择。它不依赖事件监听，兼容性好（IE9+），且天然支持键盘空格切换，无障碍友好。
-
input放在label前面，用for或嵌套绑定；label就是你的“汉堡按钮” - 侧边栏选择器写成
input:checked ~ .sidebar，注意是~（兄弟选择器），不是+（相邻） - 别忘了给
input加position: absolute; opacity: 0; pointer-events: none，否则它会占位或挡点击
<input type="checkbox" id="toggle"><label for="toggle">☰</label>
<aside class="sidebar">...</aside>
#toggle:checked ~ .sidebar {
left: 0;
}
为什么 transform: translateX() 比 left 更推荐
用 left 动画在低端 Android 或老版 iOS 上容易卡顿，因为它是布局属性，每次重排都触发 Paint；而 transform: translateX() 走的是合成层，GPU 加速更稳。
- 把
left: -280px换成transform: translateX(-280px)，同时加will-change: transform（仅对动画元素） - 对应激活状态写成
transform: translateX(0)，别混用left和transform，浏览器可能丢帧 - 如果侧边栏有子元素带
box-shadow或border-radius，务必加backface-visibility: hidden防闪烁
遮罩层（overlay）怎么盖得刚好又不挡操作
遮罩不是装饰，是防止用户误点背后内容的关键层。但它常被写成全屏 z-index: 999，结果挡住侧边栏里的链接或表单——这是高频翻车点。
- 遮罩必须和侧边栏同级，且
z-index**只比侧边栏小 1**（比如 sidebar 是 1001，overlay 就是 1000） - 遮罩用
position: fixed; top: 0; left: 0; width: 100%; height: 100%，背景半透：background: rgba(0,0,0,0.5) - 点击遮罩关闭侧边栏？别用 JS 绑
click，直接让遮罩和侧边栏共用同一个:checked状态：#toggle:checked ~ .overlay { opacity: 1; pointer-events: auto; }
transform 的层级、pointer-events 的开关时机、以及遮罩和 sidebar 的 z-index 差值里。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
