音频控件可见但不可点击，是因为上层DOM元素遮挡导致鼠标事件未传递至controls区域；需检查层叠上下文、设置position与z-index并确保遮罩层pointer-events: none。
音频控件被遮挡，不是播放器坏了，而是它被别的元素“盖住”了——鼠标事件根本没传到 的 controls 区域上。
为什么
常见现象：控件显示正常，但点击播放/暂停无响应；或拖动进度条时鼠标指针变默认箭头、无法抓取。根本原因不是 JS 绑定失败，而是上层 DOM 元素（比如浮动导航栏、固定定位的 banner、透明遮罩层）在视觉层叠上覆盖了控件区域。
- 用开发者工具选中
元素，悬停看高亮框是否完整 —— 若只高亮出顶部一小条，说明控件部分被裁剪或遮挡 - 检查其父容器是否设置了
overflow: hidden或transform，这两者会创建新层叠上下文并截断子元素渲染范围 - 特别注意
.bg-backdrop、#header-fixed、.hero__overlay这类视觉装饰层，哪怕opacity: 0.1，只要pointer-events: auto（默认值），就拦截点击
z-index
z-index 对 position: static（默认值）完全无效 —— 这是最多人踩的坑。动态插入或原生写的 标签默认就是 static，光写 audio.style.zIndex = "999" 没用。
- 必须同时设置
audio.style.position = "relative"（推荐，不脱离文档流）或"absolute"（需父容器为position: relative） - 避免用
setAttribute('style', 'z-index: 999; position: relative')拼字符串，容易覆盖已有样式；优先用audio.style.zIndex = "999"+audio.style.position = "relative" - 如果用 CSS 类控制，确保该类同时包含两行：
position: relative;和z-index: 999;
遮罩层/装饰层干扰怎么破？
很多页面在音频播放器上方加了半透明渐变层、标题文字浮层或背景图叠加，它们若未正确管理层叠关系，就会静默吃掉点击事件。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 给遮罩层（如
.audio-overlay）设pointer-events: none，让鼠标穿透到底层控件；若它内部还有按钮等可交互元素，再单独给那些子元素设pointer-events: auto - 装饰性背景图（如用
position: absolute+z-index: -1，否则自然层叠在下方，反而导致控件被压住 - 避免对
父容器设transform或will-change，它们会意外创建新层叠上下文，使z-index只在子树内生效，失去全局比较能力
移动端键盘弹出后控件错位或消失
安卓低版本和部分 iOS 场景下，软键盘弹出会触发视口重算，导致底部 被顶出可视区，或控件区域被压缩变形。
- 不要依赖
100vh布局音频容器；改用min-height: 100dvh（dvh是动态视口单位，适配键盘弹出） - 给音频容器加
position: sticky+bottom: 0，比纯fixed更可控，且不破坏滚动行为 - 若用 JS 动态调整位置，监听
resize事件不如监听focusin/focusouton input 更精准
真正难处理的不是单个 z-index 数值，而是多个定位元素之间缺乏显式声明，导致浏览器按 DOM 顺序和隐式层叠规则“猜”渲染顺序。一旦出现遮挡，优先查 position 和 pointer-events，而不是盲目堆高 z-index。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
