背景视频覆盖了 HTML 标题标签

Question

我尝试更改Z-index 来做我想做的事，但它没有修复它。我无法弄清楚我做错了什么。我希望我的标题位于背景视频的顶部。谁能指出我正确的方向？

#hero {
  width: 100%;
  height: 100vh;

   background: url("../vid/everything.mp4");
  background-size: cover;
  position: relative;
  padding-top: 82px;
}

<section id="hero" class="d-flex align-items-center">

  <video loop muted autoplay poster="assets/vid/everything.mp4" class="fullscreen-bg__video">
  <source src="assets/vid/everything.mp4" type="video/mp4">
  </video>

  <div class="container" data-aos="zoom-out" data-aos-delay="100">
    <div class="row">
      <div class="col-xl-6">
        <h1>Welcome! Heading 1</h1>
        <h2>Heading 2</h2>
        <a href="#about" class="btn-get-started scrollto">Get Started</a>

      </div>
    </div>
  </div>


</section>

现在它只显示我的视频并且标题已被覆盖。我尝试弄乱我的 CSS 文件，但无法弄清楚。我在测试时也去掉了"Background: url "，这样做也不起作用。我做错了什么？

Answer 1

试试这个...

<section id="hero" class="d-flex align-items-center">

  <video loop muted autoplay poster="assets/vid/everything.mp4" class="fullscreen-bg__video">
  <source src="assets/vid/everything.mp4" type="video/mp4">
  </video>

  <div class="container" data-aos="zoom-out" data-aos-delay="100">
    <div class="row">
      <div class="col-xl-6 vid-txt">
        <h1>Welcome! Heading 1</h1>
        <h2>Heading 2</h2>
        <a href="#about" class="btn-get-started scrollto">Get Started</a>

      </div>
    </div>
  </div>


</section>

#hero {
  width: 100%;
  height: 100vh;

   background: url("../vid/everything.mp4");
  background-size: cover;
  position: relative;
  padding-top: 82px;
}
.vid-txt{
  position: absolute;
}