覆盖视频元素上的文本

Question

我有一个全屏div设置播放视频，但要求我在它的顶部放置一些HTML。但是每当我放置它时，我都可以看到测试按钮加载然后在视频加载时消失。

我究竟做错了什么？

片段：

<div class="row black-bg">
<section class="Splash">
    <div class="video-container">
          <video autoplay muted loop="true">
            <source type="video/mp4" src="/backdropvideo.mp4">
          </video>
    </div>
    <div class="row mt-5" style="z-index:22222;"><button> test </button></div>
</section>

CSS：

.Splash {
    position: relative;
    width: 90vw;
    margin: 0 auto;
    height: 95vh;
    min-height: 710px;
    background: #000;
    overflow: hidden;
    background:black;
}

.video-container {
  position: relative;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%; 
  overflow: hidden;
}
.gamesplayed {
    background-image: url(assets/GamesBanner.png);
    background-color: black;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    width:100%;
    min-height:20vh;
}

.video-container video {
  /* Make video to at least 100% wide and tall */
  min-width: 100%; 
  min-height: 100%; 

  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
  width: auto;
  height: auto;

  /* Center the video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

Answer 1

如果我从测试按钮上的内联样式中删除z-index，并为mt-5创建一个样式规则（我在示例中选择了未定义的样式，如果需要，可以将样式添加为不同的类），如下所示该按钮在视频中仍然可见：

.mt-5 {
    position: absolute;
    top: 5px;
    z-index: 10;
}

显然取决于页面上其他项目的z-index你可能需要调整它，但关键是添加position和top属性