视频背景叠加部分

Question

所以我有这个网站，它有 5 个部分，最小高度为 100vh。在第一个上有一个视频（带有 html5 视频标签），我将其用作本节的背景。 问题是该视频停留在第二部分的顶部并隐藏了部分内容。

我尝试增加第二部分的 z-index，但它没有改变任何东西。 我能做什么？

video {
  margin: 0;
  padding: 0;
}

.video {

   position: absolute;
  top: 50%; left: 50%;
  z-index: 1;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
}




<section id="first">
 <!-- NAVBAR HERE -->

<video id="my-video" class="video" autoplay="autoplay" loop="loop" muted="" width="300" height="150">
        <source src="img/video.mp4" type="video/mp4" />
    </video><!-- /video -->


    <div class="container">


    <div class="row logo" style="z-index:100;">
        <div class="col-md-12"><img src="img/logo-cinza.png" class="img-responsive logo-grad" /></div> 
    </div>



    <div class="row botao" style="z-index:100;">
        <div class="col-md-12" style="text-align: center;"><a href="contact.html"><button class="btn btn-lg" id="button"><p>Available for hire</p></button></a></div> 
    </div>




  <div class="row chevron-down" style="z-index:100;">
      <div class="col-md-12">
        <p style="text-align:center; font-size:0.8em; color:#c3c0c0 ">Click to see more awesomness</p> 
        <a href="#second" class="smoothScroll"><img class="img-responsive seta" width="40px" src="img/seta-cinza.png" alt="Discover More Awesomness" /></a>
      </div>
</div>



    </div>

   </section> 
<section id="second">..

Answer 1

我怀疑重叠是由视频溢出容器引起的。您的问题中没有足够的 CSS / 标记来更具体，但我在下面整理了一个简单的示例。

在示例中，我还将内容放在 div 中，并将其设置为使用 z-index 进行相对定位，以确保它覆盖视频。

HTML：

<div class="section-1 video-section section">
    <video id="my-video" class="video" autoplay="autoplay" loop="loop" muted="" width="300" height="150">
        <source src="img/video.mp4" type="video/mp4" />
    </video>

    <div class="content">Here goes my content</div>
</div>

<div class="section-2 section">
    Put some content here for section 2.
</div>

CSS：

.section {
    min-height: 100vh;
    overflow: hidden;
    position: relative;
}

.video {
    height: auto;
    left: 50%;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
}

.content {
    position: relative;
    z-index: 1;
}