html - CSS Box-Shadow div 覆盖

Question

我的盒子阴影有问题，被另一个 div 遮住了。

这是我的代码:

HTML-

<div id="wrap">
        <div id="header">
            <div id="nav"></div>
        </div>  
        <div id="main_content"></div>
        <div id="footer"></div>
    </div>

CSS-

body{
    margin:0;
}
#wrap{
    margin:0 auto;

    width:84%;
}
#header{    
    background-image:url(img/header_pattern.png);
    background-repeat:repeat;

    margin:0 auto;

    width:100%;
    height:170px;

    box-shadow:5px 5px 5px black;
    z-index:1;
}
#main_content{
    background-image:url(img/main_pattern.png);
    background-repeat:repeat;

    width:100%;
    min-height:700px;
    height:100%;
    z-index:2;

}

截图-

http://i.stack.imgur.com/TfDyi.png

我怎样才能使阴影不“堆叠在”(在 z 轴上)，因此被 #main_content div 遮挡，但仍在我的 中#换行？

谢谢。

不，我不只是不想将 #main_content 下推。

Answer 1

只需添加:

position: relative;

到#header{

示例:
http://jsfiddle.net/kJajC/