CSS überlappende divs obere Leiste

Question

Ich mag die folgende Struktur mit HTML/CSS erstellen:

Ich frage mich, welche div zuerst zu machen. Das grüne und platziere das Schwarz mit einer Position oder dem Schwarzen und lege das Grün darauf.

Könnte jemand beraten, wie zu tun ist?

Die rote Box ist allgemeiner Inhalt.

Answer 1

Schauen Sie sich diese fiddle für die Lösung

<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

Sie sollten negative margin-bottom für grüne Div verwenden. So etwas wie das:

<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

Machen Sie sie in der Reihenfolge rot, grün, schwarz, dann geben Sie einfach die grüne div einen negativen unteren Rand.