html - 使用行重叠容器？

Question

所以我试图模仿这个网站的一些外观:

http://quay.com.au/

因为我对设计很感兴趣。我想知道如何使用 Bootstrap 在行中重叠容器，因为我已经查看了代码并且他们似乎正在使用它。

到目前为止，这是我对 HTML 的看法:

<div class="row">
<div class="col-md-5 col-md-offset-2"><div class="about img-rounded">
 <h3>About</h3>
 <p><b>Info1</b></p>
 <p>Info2 </p>
</div></div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-1"></div>
<div class="col-md-3 col-md-offset-2"><div class="projects img-rounded">
 <h3>Projects</h3>
 <img class="img-responsive" src="img">
 <p>Description</p>
 <img class="img-responsive" src="img"> 
 <p>Description</p>
 <img class="img-responsive" src="img">
 <p>Description</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3"><div class="work img-rounded">
 <h3>Work</h3>
</div></div>
</div>
</div>

有什么建议吗？我唯一的猜测是与 css 中的 z-index 有关...

Answer 1

查看网站上的代码，容器有一个 position: relative 并且为了让部分重叠，部分从顶部偏移，如查询体验

.page-index .pattern-gray {
    top: -240px;
}

快速启动http://www.bootply.com/Blms3j1GjO