将div定位在固定位置div下方

Question

我有3个主要的div。标题，视频背景和内容div。

前两个是固定位置。我希望内容div低于视频背景。但是因为视频根据设备的宽度进行缩放，所以我得到两个#landbg和.para1重叠。有没有一种特定的方法可以让它们低于彼此并且即使在缩放浏览器时也能保持不变？我尝试在.para1上使用margin-top。这是一个小提琴，看看它是如何工作的。 http://jsfiddle.net/gyc24cm6/2/基本上红色条必须放在大的黑色方块上，这个方块可以根据浏览器大小进行缩放。

HTML： 的 的

的

    <div id="landbg">
        <video loop muted autoplay class="landing_video">
            <source src="video/landingbg.mp4" type="video/mp4">
        </video>
    </div>
    <div class="para1">
        <div class="para_wind" data-parallax="scroll" data-image-src="images/bg1.png">
            <img src="images/bg1.png">  
        </div>
    </div>

的 CSS： 的 的

的

#landbg{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}
.landing_video{
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
}
/*Parallax 1 Styling*/
.para1{
    width: 100%;
}
.para_wind img{
    width: 100%;
    height: 200px;
}

的

Answer 1

我使用的技术有时适用于这样的情况，我使用透明图像，与我想要维护的区域具有相同的宽高比（在这种情况下，使用相同的视频尺寸）但是我不希望设置实际高度，因为我希望设备宽度控制它。

transparent image to maintain aspect ratio

<div class="container">
  <img src="http://ima.gs/transparent/000/Transparent-350x160.png" alt="">
  <div class="inner"></div>
</div>

.container {
  position: relative;
}

.container img {
  width: 100%;
  height: auto;
}

.container .inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: lightblue;
  z-index: -1;
}

透明图像将缩放并保持其比例，并将占据标记中的空间，允许其他内容在其后继续。