Question

我创建了两个div，其中一个堆栈在另一个堆栈之上。顶部div包含以块显示的图像。底部div具有负边距和背景颜色。但是，底部div的与顶部div重叠的部分的背景颜色无法显示，尽管底部div中的内容显示在顶部div的顶部。如何在顶部div的顶部显示背景颜色？

以下是代码，现场演示可从此处获取：http://jsfiddle.net/spencerfeng/6XFau/

HTML：

<div id="container">
<div id="container1">
    <img class="responsive-img" src="http://www.fubiz.net/wp-content/uploads/2013/07/One-Ocean-One-Breath14.jpg" alt="">
</div>
<div id="container2">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus pretium orci, ac tristique mauris tincidunt sit amet. Vestibulum ornare in felis non fringilla.</p>
</div>
    </div>

CSS：

#container {
    width:300px;
    margin-left:auto;
    margin-right:auto;
}
#container1 img {
    display:block;
    width:100%;
    height:auto;
}
#container2 {
    width:100%;
    height:200px;
    background:red;
    margin-top:-50px;
}

Answer 1

如果您需要红色div顶部与图像重叠，则应使用相对定位，如下所示

JSFiddle Demo

<强> CSS

#container {
    width:300px;
    margin-left:auto;
    margin-right:auto;
}
#container1 img {
    display:block;
    width:100%;
    height:auto;
}
#container2 {
    width:100%;
    height:200px;
    background:red;
    position:relative;
    top:-50px;
}

Answer 2

从p：

中删除默认边距

p{margin:0}

并从第二个div中删除负边距顶部：

#container2 {
    width:100%;
    height:200px;
    background:red;
    margin-top:0;
}

如果这就是你的目标，那么这两个盒子应该完全对齐

Answer 3

将这两个属性用于底部div：

position:relative;
z-index:999999;

顶部div中的图像始终隐藏底部div，带有负边距

3 个答案: