重叠div垂直跨越

Question

我正试图在垂直方向上跨越div-span-well重叠蓝色div-span。请参阅附图，这是否可以在bootstrap中进行？

Answer 1

重叠div的最简单方法是将position: relative与属性top，right，bottom和left结合使用。 Here is a quick JSFiddle example

Bootstrap只是编译成CSS，所以你可以在Twitter Bootstrap中做任何你可以用CSS做的事情，反之亦然。

Answer 2

不仅在TBS中，而且您可以在任何CSS中执行此操作。

说，你有这样的 HTML ：

<div class="head-with-overlay">
    <h3>Lorem</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

您可以这样使用 CSS ：

.head-with-overlay {position: relative; padding: 50px 15px 15px; border: 1px solid #ccc; margin: 10px;}
.head-with-overlay h3 {position: absolute; padding: 5px 10px; background: #00f; top: -10px; left: 50%; width: 50px; text-align: center; color: #fff; margin-left: -25px;}​

小提琴：http://jsfiddle.net/thhPg/