如何修复视频背后出现的元素

Question

有人知道如何修复吗?为什么视频下的<div>和<p>会在视频下面而不是在视频下面呢？

​

#contain {
  position: relative;
}

video {
  object-fit: fill;
}

video {
  height: 100vh;
  width: 100%;
  object-fit: cover;
  position: absolute;
}

#img {
  height: 100vh;
  width: 100%;
  display: flex;
  z-index: 2;
  position: absolute;
  justify-content: center;
  align-items: center;
}

<div id="contain">
  <div id="img">
    <a style="color:white; font-family:verdana;" title="Home">
      <img src="purefilmsw.png" alt="Pure Films" width="912.5" height="58.5">
    </a>
  </div>
  <div id="vid">
    <video id="background-video" autoplay loop muted>
            <source src="vid.mp4" type="video/mp4">
        </video>
  </div>
</div>
<p>when code is run this goes under video</p>

​

Answer 1

我认为由于你的#视频是一个绝对的位置，它被放在最上面，尝试将它的z-index 2和p标记的z-index (目标由id)放到高于2的位置。