html - 如何将容器置于扩展的 Div 之上？

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