最稳的抽屉方案是 transform: translateX() + fixed 定位，因 max-width 或 width 在 fixed 元素上无法参与布局、动画卡顿掉帧，且易被长文本突破导致溢出；应改用断点控制宽度 + transform 位移实现平滑收放。
直接用 transform: translateX() + fixed 定位是最稳的方案，其他方式（比如 max-width 过渡、left 位移、display: none 切换）在抽屉场景下要么卡顿、要么错位、要么无法响应式收放。
为什么不能靠 max-width 或 width 实现“自适应宽度”抽屉
抽屉的“自适应宽度”不是指它能随内容自动伸缩，而是指它在不同断点下能合理约束自身宽度，同时不影响主内容流。但 max-width 和 width 在 position: fixed 元素上无法参与布局计算，也无法触发平滑过渡——浏览器对它们的动画支持极差，容易掉帧或闪屏。
-
max-width只在文档流内生效，而抽屉必须脱离文档流（否则会撑开页面、导致主内容跳动） - 用
width: 0 → width: 280px过渡时，浏览器要反复重排（reflow），移动端尤其卡顿 - 如果侧边栏内容含长 URL 或未换行文本，
max-width会被强行突破，抽屉变宽并挤出视口
真正有效的自适应抽屉结构：固定定位 + transform + 断点控制
核心是把“宽度变化”从布局属性（width/max-width）转移到位移属性（transform），再用断点类控制不同屏幕下的抽屉最大宽度。
- 抽屉容器设
position: fixed; top: 0; left: 0; height: 100vh; - 宽度用
max-w-xs sm:max-w-md lg:max-w-lg（Tailwind）或手动写width: min(280px, 80vw)（原生 CSS） - 隐藏/展开全靠
transform: translateX(-100%)→translateX(0)，不碰 width - 务必加
will-change: transform（仅动画期间）和overflow: hidden（父容器）防溢出 - 移动端需补
touch-action: pan-y，避免手势冲突
遮罩层点击关闭时，如何防止误关抽屉内部链接
遮罩层（overlay）默认会拦截所有点击，但抽屉里的按钮、链接仍需响应。关键不是靠 pointer-events 堆叠控制，而是精准判断点击目标。
立即学习“前端免费学习笔记（深入）”；
- 遮罩层监听
click事件，检查event.target === overlayElement才执行关闭 - 不要给抽屉容器加
pointer-events: none—— 它会让内部所有交互失效 - 抽屉和遮罩必须同级 DOM，且遮罩
z-index低于抽屉但高于主内容（如z-40vsz-50） - 若用 checkbox 模拟状态，遮罩应为
<label>并关联 input，避免 JS 介入
最容易被忽略的两个细节
一是 will-change: transform 必须只在抽屉动画过程中设置（比如用 class 切换控制），长期开启会引发内存泄漏；二是 transform: translateX(-100%) 的 “100%” 是相对于自身宽度，不是视口，所以必须确保抽屉有明确 width 或 max-width，否则 -100% 会算错——这正是很多人抽屉收不全、边缘露白的根本原因。
