使用 Bootstrap div 获得"overlap"效果

Question

所以我有一个全宽的行，我想有一个延伸到行的顶部和底部边界之外的图像，这样看起来就像一个在网站上举着丝带的贴纸。如何在CSS中实现这种"重叠"效果？

据我所知，你可以将div嵌套在一起，也可以将它们并排浮动，但你不能把一个更高的div放在一个更薄的div上，从而使这种重叠效果发挥作用。我错过了什么？

我正在使用Bootstrap。。。如果有某种基于网格的解决方案，那将是非常棒的。

编辑：代码！这是HTML。

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

和相关的CSS（行流体是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和left调整其位置。此外，您可以使其大于行（通过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;
        }

下面是一个例子：http://jsfiddle.net/L1wn66v8/

Answer 2

一个选项（在没有提供任何代码的情况下）是用相对定位来定位图像。

div {
  width: 50%;
  border: 1px solid grey;
  margin: 25px auto;
}
img {
  float: left;
  position: relative;
  top: 50px;
  left: -50px;
  width: 100px;
  border: 1px solid red;
}

<div>
  <img src="http://www.clipartpal.com/_thumbs/pd/education/award_ribbon_blue_T.png" alt="" />
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus hic dicta dignissimos consequuntur mollitia enim fuga inventore tempore totam ad libero eveniet voluptatum iusto quis unde deleniti doloribus quos veniam perspiciatis rerum in cum
    facilis maxime. Reiciendis corporis dolor tenetur at sunt quidem asperiores natus ad soluta fuga maiores expedita vero explicabo rem consequuntur accusantium similique alias odio cupiditate quaerat eligendi! Laborum illum earum pariatur minus sunt
    eaque praesentium cum libero nihil voluptatibus dolorem eum. Eveniet nobis mollitia</p>
</div>

请注意，文本继续环绕图像，就好像它仍然在同一位置。该元素仅在视觉上移动，任何其他元素仍会将其视为未移动。

作为替代，您可以将其定位为绝对，但相对于父级。在这种情况下，元素被从流中取出，其他元素将而不是以相同的方式对其作出反应。。

div {
  width: 50%;
  border: 1px solid grey;
  margin: 25px auto;
  position: relative;
}
img {
  position: absolute;
  top: 50px;
  left: -50px;
  width: 100px;
  border: 1px solid red;
}

<div>
  <img src="http://www.clipartpal.com/_thumbs/pd/education/award_ribbon_blue_T.png" alt="" />
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus hic dicta dignissimos consequuntur mollitia enim fuga inventore tempore totam ad libero eveniet voluptatum iusto quis unde deleniti doloribus quos veniam perspiciatis rerum in cum
    facilis maxime. Reiciendis corporis dolor tenetur at sunt quidem asperiores natus ad soluta fuga maiores expedita vero explicabo rem consequuntur accusantium similique alias odio cupiditate quaerat eligendi! Laborum illum earum pariatur minus sunt
    eaque praesentium cum libero nihil voluptatibus dolorem eum. Eveniet nobis mollitia</p>
  </div