Question

滚动具有视频元素的HTML页面会使其他具有更高z-index的重叠HTML元素消失。此问题发生在Chrome中，但不会发生在Firefox中。如何解决？

示例：（＆＃34;整页＆＃34;推荐）

＆＃13;

video{height: 500px; z-index: 1; }
div
{
  width: 300px; height: 600px;
  background: red; position: relative;
  z-index: 2; top: -300px; left: 200px;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <video src="https://www.w3schools.com/html/mov_bbb.mp4" loop autoplay muted></video>
  
    <div id="d1">It disappears on scroll</div>
  
  
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

＆＃13;

有时它并没有消失，但在刷新页面后它会消失。

Answer 1

多数民众赞成我如何使用

修复它

transform: translate3d(20px, -286px, 200px);

我定义了x，y，z，并通过这种方式避免了消失的问题

body { height: 2000px }

video {
  height: 500px; 
  z-index: 15; 
  position: relative;
}

div{
  width: 300px; 
  height: 600px;
  background: red; 
  position: relative;
  z-index: 16;
  transform: translate3d(20px, -286px, 200px);
}

<main>
    <video src="https://www.w3schools.com/html/mov_bbb.mp4" loop autoplay muted></video>
  
    <div id="d1">It disappears on scroll</div>
</main>

滚动带有视频的页面时，HTML元素消失

1 个答案: