Question

这是我的代码，我们的父div具有“ cont”类，该div有三个孩子-> 1.video具有“ vid”类 2.mask带有“ maskHeaderajans”，这是一个类似于视频过滤器的图层蒙版，应粘贴在覆盖整个视频上 3.最后一个带有“主标题”，其中包括徽标和一些文本，应粘贴在第二个孩子身上（视频上的蒙版）

  <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

将cont设置为相对位置，将div设置为绝对位置

#cont{
  position: relative;
}

.maskHeaderajans{
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.main-caption{
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

Answer 2

我对您的布局进行了很少的更改。我已经将.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>

如何将三个div彼此粘在一起？

2 个答案: