Css 视频背景叠加部分

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

我试着在第二部分增加z指数，但没有任何改变。 我能做什么

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">..

视频{
保证金：0；
填充：0；
}
.视频{
位置：绝对位置；
顶部：50%；左侧：50%；
z指数：1；
最小宽度：100%；
最小高度：100%；
宽度：自动；
高度：自动；
转换：翻译（-50%，-50%）；
}
点击查看更多精彩内容
..

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

在本例中，我还将内容放置在div中，并使用z索引将其设置为相对位置，以确保其覆盖视频

HTML:

---

请发布更多标记以帮助演示该问题。这听起来像是一个简单的溢出，但没有额外的信息，我不能sure@NathanDawson只是editedI试过了但没用。。还是一样的问题：/你想让我写更多的代码吗？

<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>

.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;
}