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（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和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

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

请注意，文字会继续环绕图像，就像它仍在同一个地方一样。该元素仅在视觉上移动，任何其他元素仍会将其视为尚未移动。

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

＆＃13;

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;
}

＆＃13;

<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

＆＃13;

获得＆＃34;重叠＆＃34;使用Bootstrap div效果

2 个答案: