如何将容器放在扩展的分区？

Question

最好在图片中描述！带有asldskd的盒子，我想成为红色区域的所在。我想在黑色区域放置一个徽标，然后将单独的内容放入绿色区域。我基本上想要黑色和绿色扩展，但我希望内容在900px容器内。

这就是我现在所拥有的。我尝试使用z-index来做到这一点。有没有办法强制900px容器外的黑色绿色条，或者我需要将容器保持在它下面吗？

<div id="header"> laksjdf</div>
<div id="subheader"> alskdjf</div>

<div id="container">
asdf
</div>

这是css：

#header {
width:100%;
height:70px;
background-color:black;
position:relative;
z-index:0;
 }

#subheader {
width:100%;
height:25px;
background-color:green;
position:relative;
z-index:1;
 } 

#container {
width:900px;
margin:0 auto;
border:1px solid black;
position:relative;
z-index:1;
 } 

Answer 1

你走了，我为你做了一个编码器，告诉我它是否是你想要的

http://codepen.io/anon/pen/yHzxd