必须用 position: fixed。抽屉需脱离文档流、锚定视口边缘，absolute 受父级 transform/overflow/scroll 影响易错位或裁切；fixed 以视口为基准，不受祖先影响，但需注意 ios 键盘适配和 body 最小高度设置。
抽屉表单用 position: fixed 还是 position: absolute
必须用 position: fixed。抽屉要脱离文档流、不随滚动消失，且始终锚定视口边缘——absolute 会受父容器 transform、overflow 或 scroll 影响，一滚动就错位或被裁切。
常见错误现象：absolute 下拉滚动时表单跟着动、卡在中间、点不到提交按钮；或者父级加了 transform: translateZ(0) 后直接消失（触发新层叠上下文 + 定位上下文偏移）。
-
fixed的 top/right/bottom/left 值以视口为基准，不受祖先元素影响 - 如果页面有
html { height: 100% }但没设body { min-height: 100vh }，滚动时底部可能露白，抽屉下沿悬空 - iOS Safari 对
fixed元素在键盘弹出时支持不稳定，需额外监听focus事件微调top
侧边抽屉的宽度和动画怎么写才不卡
宽度别用百分比或 vw，固定值更可控：width: 360px 是主流移动端适配的安全宽度；动画必须用 transform: translateX() + opacity，禁用 left 或 margin-left——后者会触发重排，滑动卡顿明显。
性能影响：Chrome DevTools 的 Rendering 面板里开“Paint flashing”，能看到 left 动画每帧都在重绘整个抽屉区域；而 transform 走合成层，GPU 加速。
立即学习“前端免费学习笔记（深入）”；
- 展开动画：从
transform: translateX(100%)→translateX(0) - 收起动画反向，同时加
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s - 别忘了加
will-change: transform提前提示浏览器优化（仅对频繁动画的元素）
点击遮罩层关闭抽屉，为什么点不到？
遮罩层（.overlay）z-index 比抽屉低，或没设 position，或被其他 transform 元素截断了事件流。
典型场景：抽屉父容器加了 transform: scale(1)，导致其子元素的 fixed 层级被限制在该容器内，遮罩层实际渲染在抽屉下方。
- 遮罩层必须是
position: fixed，且z-index比抽屉高至少 1（如抽屉z-index: 1000，遮罩设1001） - 遮罩层宽高用
width: 100vw; height: 100vh;，不用100%（后者依赖父高，易塌陷） - iOS 上遮罩层需加
-webkit-tap-highlight-color: transparent防止点击闪白
表单提交后抽屉不自动收起，JS 绑定容易漏什么
最常漏的是事件委托失效或异步回调未清理：表单用 fetch 提交后，没在 then 或 finally 里调用关闭函数；或者抽屉 DOM 是动态插入的，用 querySelector 找不到节点。
使用场景：SPA 中抽屉可能跨路由复用，DOM 节点被销毁后还试图操作，报 Cannot read property 'classList' of null。
- 关闭逻辑统一抽离成函数，如
closeDrawer()，并在submit事件监听器里显式调用 - 用
event.preventDefault()阻止默认提交跳转，否则页面刷新抽屉状态丢失 - 如果用了
async/await，确保closeDrawer()在try/catch的finally块中执行，避免失败时不收起
fixed 元素的视口计算偏移，以及遮罩层在复杂布局中的层级穿透问题——这两处不测真机，上线后必现。 
