html - 使用 Bootstrap div 获得 "overlap"效果

Question

所以我有一个全宽行，我想要一个图像，该图像延伸到该行的顶部和底部边界之外一点，以便看起来像一张贴在网站上的丝带。如何在 CSS 中实现这种“重叠”效果？

据我所知，您可以将 div 彼此嵌套或并排 float ，但您不能将较高的 div 放在较薄的 div 之上并使这种重叠效果发挥作用。我错过了什么？

我正在使用 Bootstrap...如果有某种基于网格的解决方案，那就太棒了。

编辑:代码!这是 HTML。

<div class="row-fluid redRibbon">
        <div class="bodyContainer">
            <img id="isocert" src="img/isocert.png">
        </div>
</div>

和相关的 CSS(row-fluid 是 Bootstrap 中的默认类):

.bodyContainer{
            padding: 15px;
            width: 800px;
            margin: auto;
        }    
.redRibbon{
            background-color: #AF002A;
            color: white;
        }

#isocert{
            overflow: visible;
        }

我会张贴图片，但我没有足够的声誉 :(

Answer 1

给你的 .row 样式或 CSS 规则 position: relative; 现在给你的图像你想重叠那行 position: absolute; 但将其放在行内。现在它将相对于您的 .row 放置，但您可以使用 CSS 属性 top、right、bottom< 调整其位置，离开。此外，您可以使其大于行(通过 CSS 或图像属性)并且它不会影响 .row 的尺寸。如果它被其他元素切割，您可以给它一个更高的 z-index。使用此值，您应该能够获得所需的效果。

编辑
所以你的代码最终可能看起来像这样:

.bodyContainer{
            padding: 15px;
            width: 800px;
            margin: auto;
        }    
.redRibbon{
            margin-top: 200px;
            background-color: #AF002A;
            color: white;
            position: relative;
        }

#isocert{
            overflow: visible;
            position: absolute;
            top: -50px;
        }

这是一个带有示例的 fiddle :http://jsfiddle.net/L1wn66v8/