コンテンツをオーバーレイして反応させる

Question

私は、ビューポートのサイズに設定された背景イメージをわずかにオーバーレイしている3つのボックスを持っています。 これは、バックグラウンドイメージ以外のすべてのコンテンツにラッパーを置き、絶対配置することで実現しました。この問題は、ビューポートが長くなるとすべてのコンテンツが背景画像に上方向にシフトし始めるということです。私はボックスが画像の上にわずかに重なり合うようにしたい。しかし、私はそれを好きな場所に保つために、メディアクエリのトーンを書かなくても、それが反応的であることを望んでいます。もっと良い解決策を見せてくれますか？代わり.content-wrapperにposition: absolute;を用いる

https://codepen.io/Reece_Dev/pen/gGjGjJ

#full_width{ 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 30px; 
 
    z-index: 100; 
 
    background-color: grey; 
 
} 
 

 
#full_img{ 
 
    background-image: url(https://images.unsplash.com/photo-1422360902398-0a91ff2c1a1f?dpr=1&auto=compress,format&fit=crop&w=2516&h=&q=80&cs=tinysrgb&crop=); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-position: center; 
 
    height: 100vh; 
 
} 
 

 
.box{ 
 
    margin: 2rem 0; 
 
    padding: 1rem; 
 
    background-color: #ffffff; 
 
    -webkit-box-shadow: -5px 5px 14px 0px rgba(0,0,0,0.6); 
 
    -moz-box-shadow: -5px 5px 14px 0px rgba(0,0,0,0.6); 
 
    box-shadow: -5px 5px 14px 0px rgba(0,0,0,0.6); 
 
} 
 

 
#content_wrapper{ 
 
    position: absolute; 
 
    width: 100%; 
 
    top: 80%; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div id="full_width"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-xs-12"> 
 
      NAVIGATION 
 
     </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="container-fluid" id="full_img"></div> 
 

 
<div id="content_wrapper"> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-4"> 
 
     <div class="box"> 
 
      <h2>Title</h2> 
 
      
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec vehicula justo, vel tristique nibh. Sed eleifend eleifend augue. Maecenas at tempus tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam auctor enim vel nisl pellentesque volutpat.</p> 
 
     </div> 
 
    </div> 
 
     
 
    <div class="col-xs-4"> 
 
     <div class="box"> 
 
      <h2>Title</h2> 
 
      
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec vehicula justo, vel tristique nibh. Sed eleifend eleifend augue. Maecenas at tempus tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam auctor enim vel nisl pellentesque volutpat.</p> 
 
     </div> 
 
    </div> 
 
     
 
    <div class="col-xs-4"> 
 
     <div class="box"> 
 
      <h2>Title</h2> 
 
      
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec vehicula justo, vel tristique nibh. Sed eleifend eleifend augue. Maecenas at tempus tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam auctor enim vel nisl pellentesque volutpat.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-12"> 
 
     <h2>another section</h2> 
 
      
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec vehicula justo, vel tristique nibh. Sed eleifend eleifend augue. Maecenas at tempus tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam auctor enim vel nisl pellentesque volut. patLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec vehicula justo, vel tristique nibh. Sed eleifend eleifend augue. Maecenas at tempus tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam auctor enim vel nisl pellentesque volutpat.</p> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-12"> 
 
     <h2>another section</h2> 
 
      
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec vehicula justo, vel tristique nibh. Sed eleifend eleifend augue. Maecenas at tempus tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam auctor enim vel nisl pellentesque volut. patLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec vehicula justo, vel tristique nibh. Sed eleifend eleifend augue. Maecenas at tempus tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam auctor enim vel nisl pellentesque volutpat.</p> 
 
     </div> 
 
    </div> 
 
</div> 
 
</div>

Answer 1

、margin-topを使用し-100pxに値を設定します。 divを上に移動し、divの上にオーバーレイします。

#content_wrapper{ 
    width: 100%; 
    margin-top: -100px; 
}