HTML 标签本身不渲染 DOM 元素，字幕由浏览器内置控件层在 video 合成层中固定定位（如底部 10%～15%）显示，脱离 CSS 层叠上下文，故 z-index 无效；遮挡问题本质是自定义控件与字幕区域物理重叠，需通过外层容器 padding-bottom 预留安全区或改用 JS 驱动的自定义字幕层解决。
HTML 字幕标签（<track></track>）本身不渲染 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 留出字幕安全区的三种可靠方式
核心思路是：不让字幕区域和你的控件共用同一块垂直空间。不要试图“压”字幕，而是“让”出空间。
- 在
<video></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 的视口计算逻辑，导致字幕突然上移并覆盖输入框。这不是样式问题，是浏览器对“可视区域”的重新判定。
立即学习“前端免费学习笔记（深入）”；
- 在
focusin事件监听到input或textarea获得焦点时，立即执行：video.style.visibility = 'hidden';，字幕随之消失；失焦后再恢复visibility: visible - 避免用
display: none—— 它会中断视频解码，切回时有黑屏；visibility: hidden仅隐藏渲染，解码持续 - 若需保留字幕可见性，改用
video.setSinkId('')（禁用音轨）+video.pause()临时冻结画面，比隐藏更轻量
自定义字幕层替代
当项目要求字幕必须响应主题色、支持 RTL、或与弹幕共存时，放弃原生 <track></track> 是更可控的选择，但代价是失去 WebVTT 解析和时间轴同步能力。
- 用
<div class="subtitle-overlay"> 覆盖在 <code>video上，通过video.currentTime+TextTrackCueList手动匹配并更新文本 - 关键限制：WebVTT 文件必须由 JS 主动 fetch 并解析（不能依赖浏览器自动加载），否则 cue 时间点无法对齐
- 性能注意：每 50ms 检查一次
currentTime，用requestAnimationFrame驱动，避免setInterval卡顿
最易被忽略的一点：所有基于 <track></track> 的方案都依赖浏览器对 default 属性的支持。如果没显式写 <track kind="subtitles" src="..." default></track>，iOS Safari 可能完全不渲染字幕，导致你调试半天发现根本不是遮挡问题，而是压根没出来。
