html - 尝试将内部div高度扩展到超出容器div高度

我正在尝试创建一种效果，其中蓝色部分超出了灰色部分。

蓝色部分当前包含在灰色部分中，这可能是问题所在。

http://nufios.com/node

我将其作为HTML：

<div id="header-wrapper">

  <div id="header">

...

</div></div>

这就是CSS：

#header-wrapper {
width: 100%;
background-color: #686868;
}

#header {
width: 60%;
background-color: #45719E;
margin: 0 auto;
padding: 0 2em 2em 2em;
position: relative;
}

如何获得它，以使蓝色部分位于灰色部分的中心，并且仍可以向下进入灰色部分（即，蓝色部分的高度更大）。

最佳答案

尝试使用z-index和固定高度：
CSS：

#header-wrapper {
width: 100%;
background-color: #686868;
height:30px;
}

#header {
width: 60%;
background-color: #45719E;
margin: 0 auto;
padding: 0 2em 2em 2em;
position: relative;
z-index:10;
height:50px;
}

此处的jsFiddle演示：http://jsfiddle.net/LynchJustRules/RQV4h/