CSS重叠div顶部栏

Question

我想用HTML / css创建以下结构：

我想知道哪个div先做。绿色的，将黑色放置在一个位置或黑色上，并将绿色放在上面。

有人可以建议怎么办？

红色框是一般内容。

Answer 1

你应该对绿色div使用负边距底部。像这样：

<STYLE>
div.black {
  z-index: 10;
}
div.green {
  margin-bottom: -20px;
  z-index: 100;
}
</STYLE>
<div class="red"></div>
<div class="green"></div>
<div class="black"></div>

Answer 2

按红色，绿色，黑色的顺序制作它们，然后简单地给绿色div一个负底边。

Answer 3

查看此fiddle以获取解决方案

<div class="red"></div>
<div class="green"></div>
<div class="black"></div>

<style>

.red {
height: 50px;
width: 100%;
border: 5px solid red;
margin-bottom: 20px;
}
.green {
height: 30px;
width: 100%;
border: 5px solid green;
margin-bottom: -20px;
}

.black {
height: 200px;
width: 100%;
border: 5px solid black;
z-index:-1;
position: absolute;
}

</style>