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; 

} 

Screenshot-

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

我怎么能ま这样阴影就不会“堆叠在”（在z轴上），因此被#main_content div遮挡，但仍然在我的#wrap之内？

谢谢。

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

Answer 1

只需添加：

position: relative; 

要#header{

例子：
http://jsfiddle.net/kJajC/

Answer 2

您需要在 “位置” 的元素，如果你想 “堆栈”，它在不同的z轴使用z-index。

请注意，如果你实际上并不想改变其在X/Y平面位置，然后只将其指定为position:relative;没有任何top，bottom，left或right X/Y偏移的，它会定位在X/Y平面上，它将静止放置。

从MDN on adding a z-index：

警告！如果一个元素被定位，z-index只会起作用。

我发现他们的系列文章Understanding CSS z-index真的有用这个东西。