Question

我有三个框略微覆盖背景图像，背景图像设置为视口的大小。这是向下滚动一下时的样子：我通过在除了背景图像之外的所有内容周围放置包装然后将其定位为绝对来实现此目的。这个问题是随着视口变长，所有内容开始向上移动到背景图像上。我只希望盒子略微覆盖图像。但我也希望它能够做出响应，而不必编写媒体查询的语气，以便将它保持在我喜欢的位置。你能告诉我一个更好的解决方案吗？

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

＆＃13;

#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%;
}

＆＃13;

<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>

＆＃13;

Answer 1

不要在position: absolute;上使用.content-wrapper，而是使用margin-top并将值设置为-100px。这会将div移动并叠加在上面的div上。

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

覆盖内容并使其具有响应能力

1 个答案: