推荐使用 transform: translatex() 实现侧边抽屉，因其动画顺滑、不干扰文档流；需配合 position: absolute/fixed、transition、body 滚动禁用及 bfc 触发（overflow-y: auto + height: 100vh）；纯 css 方案可用 checkbox + :checked + 相邻兄弟选择器；可访问性需用 display: none 隐藏、aria-hidden 与 inert 控制。
侧边抽屉用 position: fixed 还是 transform？
position: fixed 更直接，但容易和页面滚动、z-index 层叠冲突；transform: translateX() 动画更顺滑、不影响文档流，推荐作为默认方案。实际开发中，只要父容器没设 overflow: hidden，transform 方案基本不会意外裁剪内容。
关键点：
- 抽屉容器必须设
position: absolute或fixed，且父级（通常是）需有明确尺寸或height: 100vh - 动画要加
transition: transform 0.3s ease-in-out，否则打开/关闭会“跳” - 移动端注意禁用 body 滚动：抽屉展开时给
加style="overflow: hidden"，关闭时恢复
如何用纯 HTML + CSS 实现开关逻辑？
不需要 JS 也能做，靠 checkbox + :checked 伪类驱动。把 <input type="checkbox" id="drawer-toggle"> 放在最前，用 <label for="drawer-toggle"></label> 当触发按钮，再用相邻兄弟选择器控制抽屉显示：
<input type="checkbox" id="drawer-toggle"><label for="drawer-toggle" class="drawer-btn">☰</label>
<aside class="drawer">...</aside>
.drawer {
position: fixed;
top: 0;
right: -300px;
width: 300px;
height: 100vh;
background: #fff;
transition: transform 0.3s ease;
}
#drawer-toggle:checked ~ .drawer {
transform: translateX(-300px);
}
注意：~ 是通用兄弟选择器，要求 .drawer 和 #drawer-toggle 同级且在它后面。如果结构嵌套深，就得改用 JS 控制 class。
抽屉内容区域滚动不生效？
常见现象：抽屉里列表很长，但滚不动。根本原因是 position: fixed 容器默认不创建新的块格式化上下文（BFC），内部 overflow 失效。
解决办法只有一条：强制触发 BFC。
- 加
overflow-y: auto到抽屉容器本身（不是子元素） - 同时确保它有明确高度，比如
height: 100vh或max-height: 100vh - 避免父级（如
）设了overflow: hidden—— 这会直接截断子元素的滚动
移动端点击穿透、键盘焦点丢失怎么办？
iOS Safari 和部分安卓浏览器里，抽屉展开后点不到里面链接，或者按 Tab 键跳过抽屉内容，本质是 visibility: hidden 或 opacity: 0 不等于“可访问性隐藏”。
正确做法：
- 用
display: none隐藏未激活状态，而不是visibility或opacity - 抽屉显示时，用
aria-hidden="false"并配合inert属性（现代浏览器支持）冻结背景内容 - 首次打开后，用 JS 聚焦到抽屉第一个可聚焦元素：
drawer.querySelector('a, button, [tabindex]')?.focus()
inert 和 display: none 的组合，比单纯靠 CSS 隐藏更可靠。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
