抽屉菜单被遮住主因是父容器创建了层叠上下文，使z-index失效；解决需检查并移除触发元素的transform等属性，或用portal将抽屉挂载到body下，同时配合fixed定位、body滚动控制及transform动画优化。
抽屉菜单的 z-index 为什么总被遮住？
移动端抽屉（Drawer）被内容层盖住，不是 z-index 数值不够大，而是父容器触发了新的层叠上下文（stacking context），让子元素的 z-index 失效。常见于设置了 transform、opacity、will-change 或 filter 的父容器——比如轮播图、导航栏或根容器 #app。此时即使抽屉本身设了 z-index: 9999，只要它的某个祖先有 transform: translateZ(0)，它就被“关进”那个局部层级里了。
解决办法很直接：
- 用浏览器开发者工具检查抽屉元素的「Computed」面板，看「Stacking Context」一栏是否显示「Yes」，并定位是哪个祖先触发的
- 临时移除可疑祖先的
transform、opacity或will-change，确认是否恢复层级 - 若必须保留该样式（如为动画性能加了
will-change: transform），就把抽屉 DOM 移到下（用Portal或手动appendChild），让它脱离那个干扰的层叠上下文
抽屉容器必须用 fixed 定位 + 手动控制 body 滚动
用 position: absolute 很容易被父容器裁剪（overflow: hidden）或随页面滚动偏移；而 position: fixed 是唯一能稳定锚定视口、不受滚动影响的方案。但随之而来的问题是：抽屉展开时，body 默认仍可滚动，会暴露背后内容，且 iOS Safari 有滚动穿透 bug。
关键操作如下：
- 抽屉显示时，给
加overflow: hidden和touch-action: none（后者防 iOS 滚动穿透） - 记录 body 当前
scrollTop，在抽屉关闭后恢复，否则页面会跳回顶部 - 避免用
position: fixed+top: 0做全屏遮罩层（.drawer-overlay），它可能在部分 Android WebView 中不响应点击；改用position: fixed; inset: 0更稳妥
transition 动画卡顿？别只 animating left/right
仅对 left 或 right 做 transition，在中低端安卓机上极易掉帧，因为每次重排都会触发 layout 计算。真正流畅的做法是只动合成属性：transform: translateX()。
实操要点：
- 抽屉容器必须设
transform: translateX(-100%)（隐藏）和transform: translateX(0)（展开），配合transition: transform 0.3s ease-out - 禁止同时写
left: -300px和transform: translateX(-300px)，CSS 会取 transform 为最终值，left 被忽略且易引发渲染歧义 - 若需抽屉宽度自适应（如 80vw），不要用
transform: translateX(calc(-100vw + 20px))—— calc() 在 transform 中兼容性差；改用transform: translateX(-100%)+width: 80vw，靠容器宽度控制露出区域
iOS Safari 点击穿透和 backdrop-filter 模糊失效
iOS 15+ 的 Safari 对 backdrop-filter: blur(10px) 支持仍不稳定：抽屉打开瞬间模糊常为空白，或关闭后残留。更严重的是，遮罩层 .drawer-overlay 若未设 cursor: pointer 或未监听 touchstart，点击它关闭抽屉时，事件可能穿透到底层按钮上。
绕过方式很具体：
- 遮罩层必须有明确的
background-color: rgba(0,0,0,0.5)（哪怕极透明），不能只靠backdrop-filter；iOS 需要真实背景色才启用模糊渲染 - 在遮罩层上加
-webkit-tap-highlight-color: transparent，并确保绑定的关闭事件监听器使用addEventListener('click', ...)，而非onclick属性（后者在 iOS 中可能延迟触发） - 如果必须用模糊效果，把
backdrop-filter放在抽屉内容区（.drawer-content）而非遮罩层，成功率更高
抽屉的复杂度不在结构，而在那些看不见的层叠规则和平台差异——尤其当多个 fixed 元素叠加、又混用 transform 和 scroll 时，一个没关掉的 will-change 就能让整个交互崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
