CSS重疊的div頂欄

Question

我想與HTML/CSS創建以下結構：

我不知道哪DIV做第一。綠色的那個，把黑色放在一個位置或黑色，並把綠色放在它的上面。

有人可能會建議如何做？

紅框是一般內容。

Answer 1

看看這個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> 

Answer 2

您應該對綠色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 3

使它們的順序爲紅色，綠色，黑色，然後簡單地給綠色div一個負底部邊距。