css - 重叠 div 垂直跨越

Question

我正在尝试将蓝色 div-span 垂直重叠在 div-span-well 上。请参阅附件图像，这在引导程序中是否可行？

Answer 1

重叠 div 最简单的方法是结合使用、和position: relative属性。这是一个快速的 JSFiddle 示例。toprightbottomleft

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/