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真的有用這個東西。