html - 如何在 css/bootstrap 中实现面板重叠？

Question

我正在努力实现这一目标:

我想要灰色的三个面板 <div>与他们上方的白色超大屏幕重叠。如何在 CSS 或 Bootstrap 中执行此操作？

HTML:

<div id="home-page">
  <div class="container text-center">
    <div class="row">

      <div class="col-sm-4">
        <div class="panel">
        </div>
      </div>
      <div class="col-sm-4">
        <div class="panel">
        </div>
      </div>
      <div class="col-sm-4">
        <div class="panel">
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <h3>Passionate About Technology?</h3>
    <p>We make and effort to learn something everyday</p>
    <a href="/rush" class="btn btn-danger text-center" id="learn-btn">LEARN</a>
  </div>
</div>

CSS

#home-page        { background: #EFEFEF; }
#home-page .panel { box-shadow: 0px 0px 10px gray; margin: 15px; }

谢谢!

Answer 1

通过对您的代码进行一些调整，我能够复制您的图片:

这是CSS:

 #home-page {
   background: #EFEFEF; 
 }

  #home-page .panel {
     box-shadow: 0px 0px 10px gray;
     margin: 15px;
     margin-top:-50px; 
     height:200px;
  }

 #jumbo{
    height:100px;
 }

我还在顶部添加了一个 div 来获得这种效果

<div id="jumbo"></div>

请看我的codepen http://codepen.io/sammyb123/pen/dMJaRw