抽屉容器必须用 flex 而非 absolute：flex 使主内容与抽屉成为同级 item，通过 flex 属性动态分配宽度并配合 transform 平移，确保主内容响应式收缩/展开；absolute 会脱离文档流，导致主内容无法避让、overflow 截断抽屉。
侧边栏抽屉效果不用 JavaScript 也能做，但纯 CSS 实现的关键在于：必须用 transform 触发硬件加速位移，且容器需用 display: flex 控制主内容与抽屉的相对定位关系——否则会出现布局重排、滚动穿透或遮罩失效。
抽屉容器为什么必须用 flex 而不是 position: absolute
用 position: absolute 把侧边栏“盖”在主内容上，看似简单，但会破坏文档流，导致主内容区域无法自动避让；一旦主内容有 overflow: auto，抽屉就可能被截断。而 display: flex 让主内容区和抽屉成为同级 flex item，通过 flex 属性动态分配宽度，再配合 transform 平移抽屉，能保证主内容始终响应式收缩/展开。
-
flex容器需设overflow: hidden，防止抽屉移出时出现横向滚动条 - 抽屉元素要设
flex-shrink: 0，避免被 flex 压缩变形 - 主内容区推荐用
flex: 1占满剩余空间，而非固定width
transform: translateX() 的位移值怎么定才不抖动
抽屉位移量不能写死成 translateX(300px) 这类绝对值，否则在不同屏幕或缩放下容易错位。应优先用 transform: translateX(-100%) 或 translateX(calc(-1 * var(--drawer-width)))，确保位移始终等于自身宽度。
- 用
100%时，抽屉父容器必须有明确宽度（如width: 300px），否则100%会按视口宽计算 - 用 CSS 变量更可控：
--drawer-width: 280px，再配合calc()，方便后续媒体查询覆盖 - 务必加
transition: transform 0.3s ease-in-out，且不要给left/right同时加 transition，否则会触发 layout，卡顿明显
如何阻止抽屉展开时主内容区滚动穿透
抽屉弹出后，用户如果还在主内容区滚动，页面仍会动——这不是 bug，是浏览器默认行为。解决方式不是禁用 body 的 overflow，而是精准锁定抽屉所在容器的滚动上下文。
- 抽屉容器（即 flex 父元素）设
overscroll-behavior: contain，阻止滚动事件穿透到外层 - 主内容区若本身可滚动，需额外加
touch-action: pan-y，避免 iOS 上滑动抽屉时误触发主内容滚动 - 不要用
body { overflow: hidden }，会导致页面跳回顶部，且 Safari 下有兼容问题
真正难的不是位移动画，而是抽屉关闭后如何让焦点回到触发按钮、键盘 Tab 顺序是否连续、以及屏幕阅读器能否感知状态变化——这些都得靠 aria-expanded 和 aria-controls 配合 focus 管理，纯 CSS 做不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
