CSS Box-Shadow div overlay

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;

}

Screenshot-

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

我怎样才能使阴影不会"堆积在"(在z轴上),因此被#main_contentdiv 遮挡,但仍然在我的内部#wrap？

谢谢.

不,我不只是想#main_content推倒.

Answer 1

只需添加:

position: relative;

至 #header{

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