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

透明圖像將按比例，並保持它的比例，並將佔據它在標記允許空間其他內容繼續後。