Chrome中滚动含video元素页面时高z-index重叠元素消失的修复方法

这个问题我太熟悉了！Chrome对视频元素的硬件加速优化有时候会“耍小脾气”，明明你的div z-index设置得更高，滚动时却被video盖住，Firefox在这方面的渲染逻辑就严谨得多。给你几个亲测有效的修复方案：

先看你的原始示例代码（整理后） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Z-index Scroll Issue</title>
    <style>
        video {
            height: 500px;
            z-index: 1;
        }
        div {
            width: 300px;
            height: 600px;
            background: red;
            position: relative;
            z-index: 2;
            top: -300px;
            left: 200px;
        }
    </style>
</head>
<body>
    <video src="your-video-source.mp4" controls></video>
    <div></div>
</body>
</html>

修复方案1：让Video进入正常合成层 #

Chrome会把video放到特殊的硬件加速层，脱离常规层叠规则。我们可以给video添加transform: translate3d(0, 0, 0);，强制它进入标准的合成层，这样z-index规则就会正常生效：

video {
    height: 500px;
    z-index: 1;
    transform: translate3d(0, 0, 0);
}

也可以用will-change: transform;替代，效果类似，它会提前告诉浏览器这个元素需要硬件加速，避免滚动时的层叠异常。

修复方案2：强制上层Div占据更高合成层 #

给红色div添加transform: translateZ(1px);，让它的合成层级高于video的特殊层，哪怕Chrome对video有特殊处理，div也能稳稳压在上面：

div {
    width: 300px;
    height: 600px;
    background: red;
    position: relative;
    z-index: 2;
    top: -300px;
    left: 200px;
    transform: translateZ(1px);
}

修复方案3：降低Video的合成层级 #

如果上面两种方法都不生效，试试把video的合成层往下压，给它加transform: translateZ(-1px);，这样div的z-index=2自然就能覆盖它：

video {
    height: 500px;
    z-index: 1;
    transform: translateZ(-1px);
}

为什么会出现这个问题？ #

Chrome为了优化视频播放的流畅度，会把video元素分配到一个独立的硬件加速渲染层，这个层的优先级有时候会突破常规的CSS z-index规则，尤其是在页面滚动时，就出现了div被“吃掉”的情况。而Firefox的合成层管理逻辑没有这个特殊处理，所以层叠表现正常。

内容的提问来源于stack exchange，提问作者Rafał Świerczek