HTML 标签本身不渲染 DOM 元素，字幕由浏览器内置控件层在 video 合成层中固定定位（如底部 10%～15%）显示，脱离 CSS 层叠上下文，故 z-index 无效；遮挡问题本质是自定义控件与字幕区域物理重叠，需通过外层容器 padding-bottom 预留安全区或改用 JS 驱动的自定义字幕层解决。

HTML 字幕标签（）本身不渲染 DOM 元素，真正显示字幕的是浏览器内置的视频控件层——它天然脱离 CSS 层叠上下文，无法用 z-index 或 margin 直接干预。所谓“遮挡”，其实是字幕与自定义 UI（如播放按钮、进度条、悬浮菜单）在视觉上重叠，根源在于浏览器对字幕区域的固定定位策略和页面布局未做协调。

为什么 video + track 的字幕总盖住你的自定义控件

浏览器将字幕渲染在 video 元素的“合成层”中，位置由 UA 样式硬编码为底部 10%～15% 区域（具体值因浏览器而异），且不响应父容器的 transform、overflow 或 z-index。你加的 .custom-controls { z-index: 9999; } 完全无效——因为字幕不在同一个层叠上下文中。

• Chrome / Edge：字幕默认锚定在 video 底部内边距上方约 24px，且无视 padding-bottom
• Safari：字幕高度不可预测，横屏时可能被裁剪，且不随 video 的 object-fit 缩放同步缩放
• Firefox：字幕区域会覆盖 video::after 伪元素，但不覆盖 position: absolute 子元素（可利用这点 hack）

给 video 留出字幕安全区的三种可靠方式

核心思路是：不让字幕区域和你的控件共用同一块垂直空间。不要试图“压”字幕，而是“让”出空间。

• 在 外层加包裹容器，并设 padding-bottom: 60px（推荐最小值），再把自定义控件绝对定位到该 padding 区内，确保它们物理上不与字幕渲染区重叠
• 用 video 的 postroll 或 controlslist="nodownload" 等属性触发 UA 重绘，部分版本 Chrome 下能微调字幕起始位置（非稳定手段，仅作备选）
• 监听 loadedmetadata 后，读取 video.videoHeight 和 video.clientHeight，动态计算字幕大概占用高度（通常为 Math.max(32, video.clientHeight * 0.12)），然后用 JS 设置包裹容器的 padding-bottom

移动端键盘弹起时字幕遮挡输入框怎么办

安卓 WebView 和 iOS Safari 在软键盘弹出后，会强制重置 video 的视口计算逻辑，导致字幕突然上移并覆盖输入框。这不是样式问题，是浏览器对“可视区域”的重新判定。

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

• 在 focusin 事件监听到 input 或 textarea 获得焦点时，立即执行：video.style.visibility = 'hidden';，字幕随之消失；失焦后再恢复 visibility: visible
• 避免用 display: none —— 它会中断视频解码，切回时有黑屏；visibility: hidden 仅隐藏渲染，解码持续
• 若需保留字幕可见性，改用 video.setSinkId('')（禁用音轨）+ video.pause() 临时冻结画面，比隐藏更轻量

自定义字幕层替代 的边界条件

当项目要求字幕必须响应主题色、支持 RTL、或与弹幕共存时，放弃原生 是更可控的选择，但代价是失去 WebVTT 解析和时间轴同步能力。

• 用
  覆盖在 video 上，通过 video.currentTime + TextTrackCueList 手动匹配并更新文本
• 关键限制：WebVTT 文件必须由 JS 主动 fetch 并解析（不能依赖浏览器自动加载），否则 cue 时间点无法对齐
• 性能注意：每 50ms 检查一次 currentTime，用 requestAnimationFrame 驱动，避免 setInterval 卡顿

最易被忽略的一点：所有基于 的方案都依赖浏览器对 default 属性的支持。如果没显式写 ，iOS Safari 可能完全不渲染字幕，导致你调试半天发现根本不是遮挡问题，而是压根没出来。