覆盖内容并使其响应

Question

我有三个稍微覆盖背景图像的框，它被设置为视图端口的大小。这是它向下滚动一下时的样子： 我已经实现了这一点，将所有内容包裹在背景图像周围，然后将其定位为绝对。问题在于，随着视口变长，所有内容开始向上移动到背景图像上。我只希望盒子稍微覆盖图像。但我也希望它能够响应，而不必写出媒体查询的音调，以保持它在我喜欢的地方。你能告诉我一个更好的解决方案吗？

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

而是在.content-wrapper使用position: absolute;的，使用margin-top和值设置为-100px。这将移动div并将其覆盖在上面的div上。

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