Safari 中 z-index 对 <video> 无效是因为其被强制置于原生控件层，需结合 webkit-playsinline、transform: translateZ(0) 和 z-index 才能实现层级控制。
为什么 z-index 对 Safari 的 <video> 无效
Safari（尤其是 iOS/iPadOS）将 <video> 视为“原生控件层”，默认渲染在 WebView 内容层之上，z-index 完全不生效——这不是 CSS 失效，而是浏览器强制的合成层级策略。哪怕父容器设了 position: relative 和 z-index: 9999，视频仍会穿透覆盖所有 fixed 或 absolute 元素。
-webkit-playsinline 能解决什么、不能解决什么
这个属性只控制视频是否在页面内播放（而非全屏），它本身**不改变层级**，但它是开启后续层级调控的前提：
- 必须加在
<video>标签上：<video webkit-playsinline playsinline>（双写更稳妥） - 仅 iOS 10+ 和部分 macOS Safari 有效；不加则视频点击即全屏，此时完全脱离页面 DOM 层级
- 加了之后，视频仍在原生层，但至少保留在页面视口内，为其他 hack 提供操作空间
真正起效的层级控制方案：transform: translateZ(0) + will-change: transform
触发 Safari 的独立合成层（compositing layer），让视频元素脱离默认的“最高原生层”，进入可被 z-index 管理的 GPU 合成层：
.video-wrapper video {
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: transform;
}
注意要点：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 必须作用在
<video>自身，而不是其父容器 - 搭配
position: relative和明确的z-index才能生效（例如z-index: 2） - 若同时有多个重叠视频，需确保它们的
z-index值有差异，且父容器没有overflow: hidden截断合成层 - 部分旧版 Safari（iOS 12 之前）可能需额外加
-webkit-backface-visibility: hidden
覆盖弹窗/悬浮按钮时的典型错误与修复
常见现象：顶部导航栏用 position: fixed，视频一播放就盖住菜单；或播放中弹出的字幕、控制按钮消失。
根本原因不是 z-index 数值不够大，而是视频未进入合成层。修复步骤：
- 确认
<video>含webkit-playsinline和playsinline - 给
<video>加transform: translateZ(0)和z-index: 1 - 给悬浮层（如弹窗）设
position: fixed+z-index: 10（必须 > 视频的 z-index） - 禁用视频的
controls属性，改用自定义控件——原生控件在 Safari 中仍可能突破合成层限制
复杂点在于：同一页面多个 <video> 需分别处理，且 translateZ(0) 可能轻微影响滚动性能，尤其在低端 iOS 设备上。别指望一个 CSS 属性全局搞定，得逐个元素验证层级。
