html - 如何将三个 div 相互粘贴？

Question

这是我的代码，我们有父 div 和“cont”类，这个 div 有三个 child --> 1.video 和“vid”类 2.mask with "maskHeaderajans"这是一个像视频过滤器一样的图层蒙版，它应该贴在覆盖整个视频上 3.最后我们有“主要字幕”，其中包括 Logo 和一些文本，应该贴在第二个 child 身上(视频中的面具)

  <div id="cont" style="max-height:760px;">
      <div class='vid header'>
          <video autoplay muted loop id="myVideo">
              <source src="img/atur.shiraz-20181117-0001.mp4" type="video/mp4">
          </video>
      </div>
          <!--<div class="maskHeader" style="background: url(img/3px-tile.png);"></div>-->
    <div class="maskHeaderajans"></div>
          <div class="main-caption">
              <div class="logo">
                  <!--<img src="img/jk.png" alt="logo" />-->
              </div>
              <div>
                  <ul class="slides" style="margin-top: 50px;">
                      <li>
                          <h1 class="white" id="ajansname">AJANS ORDI</h1>
                          <h2 class="white">PER SAFAR, PER TAJROBE</h2>
                      </li>


                  </ul>
              </div>
              <!-- end slider -->

          </div><!--  end main caption -->

      </div>

Answer 1

我对您的布局做了一些改动。我已将 .main-caption 元素移动到 .maskHeaderajans 中。请看下面的代码。

    <style>
.cont{
    position:relative;
    display:block;
    max-height:760px;
}
.vid.header{
    display:inline-block;
    position:relative;
    z-index:0;
}
.maskHeaderajans{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;


}
.main-caption{
    position:relative;
    display:block;
    width:50%;
    margin:0 auto;

}
.main-caption .logo{
    display:inline-block;
    background-position:50%;
    background-repeat:no-repeat;
    background-size:cover;
    background-color:blue;

}
.main-caption .logo img{
    visibility:hidden;
    width:100%;
    height:auto;
}
.slides{
    position:relative;
    display:inline-block;
    width:50%;
    text-decoration:none;
    padding:0;
    margin:0;
    list-style:none;
    transition:translateX(-2em);
    z-index:9;
}
.slides li{
    list-style-type:none;
}
li h1{
    font-size:1.75em;
    font-weight:normal;
    margin:0;
    margin-bottom:1em;
}
</style>


 <div class="cont" id="cont">
  <div class='vid header'>
      <video autoplay muted loop id="myVideo">
          <source src="img/atur.shiraz-20181117-0001.mp4" type="video/mp4">
      </video>
  </div>
      <!--<div class="maskHeader" style="background: url(img/3px-tile.png);"></div>-->
<div class="maskHeaderajans">
    <div class="main-caption">
          <div class="logo" style="background-image:url('jk.png')">
              <img src="jk.png" alt="logo"  />
          </div>
          <ul class="slides" style="margin-top: 50px;">
              <li>
                  <h1 class="white" id="ajansname">AJANS ORDI</h1>
                  <h2 class="white">PER SAFAR, PER TAJROBE</h2>
              </li>
          </ul>
          <!-- end slider -->
      </div><!--  end main caption -->
    </div>
  </div>