html - 在 元素上时背景颜色消失

Question

我有两个 Twitter Bootstrap 3 容器。第一个容器里面有一个简单的图像，第二个容器包含一些从 The Loop 加载的文本。 我希望第二个容器与第一个容器重叠一点。

我尝试为第二个容器设置负 margin-top，为第一个容器设置负 margin-bottom。它可以移动文本，但第二个容器的 background-color 不会与图像重叠。只有文本可以做到这一点。

第二个容器的 background-color 似乎在第一个容器的图像下消失了。

你能帮我解决这个问题吗？ 我希望第二个容器的 background-color 与第一个容器的图像重叠。就像已经对文本完成的那样。

HTML:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12 singlePostCoverContainer">
            <?php the_post_thumbnail('full', array('class' => 'center-block singlePostCover')); ?>
        </div>
    </div>
</div>
<div class="container singlePost">
    <div class="row titleRow">
        <div class="col-sm-3 col-sm-push-9 col-xs-12">
            <p>TEST</p>
        </div>          
        <div class="col-sm-9 col-sm-pull-3 col-xs-12 post">
            <span class="catDescription">XXX</span>
            <h4><?php the_title(); ?></h4>
        </div>
    </div>
</div>

LESS(它正在被编译成 CSS，对于了解 CSS 的人来说阅读起来应该不是什么大问题):

div.singlePostCoverContainer {
    img {
        margin-bottom:-200px;
    }
}

.singlePost {
    background-color:white !important;
}

Answer 1

正如评论中所讨论的那样，相对定位第二个容器(具有标题的容器)就足以让 background 颜色正确显示。

.singlePost{
    background: white;
    position: relative; /* added this */
    width: 100px; /* only for demo */
    margin-left: 40px; /* only for demo */
    margin-top: -200px; /* just removed the bottom margin on img and added this */
}

注意:我在 img 上删除了 margin-bottom 并在容器，但该更改完全是可选的，因为任何一种方式都可以。

CodePen Demo