無法獲得箱形陰影以顯示以上Div

Question

下面是我試圖完成的一個示例。 http://jsfiddle.net/QqME6/

從上面的div的陰影不會出現在它下面的div頂部。據我所知，我需要設置z-index，所以它會出現在頂部，只適用於position: relative;的元素，但它仍然沒有出現。我究竟做錯了什麼？

<div id="top"> 
</div> 

<div id="middle"> 
    <div id="innerMiddle"> 
    </div> 
</div> 

#top { 
    width: 100%; 
    height: 100px; 
    box-shadow: 3px 3px 3px #333; 
    background-color: blue; 
} 

#middle { 
    width: 100%; 
    height: 200px; 
    z-index: 0; 
    position: relative; 
    background-color: orange; 
} 

#innerMiddle { 
    width: 200px; 
    height: 200px; 
    margin: 0 auto; 
    background-color: green; 
} 

Answer 1

這是你希望出現在頂部，所以給的是position: relative不是給position: relative到#middle#top及其box-shadow。沒有必要爲z-index: 0。

http://jsfiddle.net/thirtydot/QqME6/1/

Answer 2

你的CSS更改爲：

#top { 
    width: 100%; 
    height: 100px; 
    box-shadow: 3px 3px 3px #333; 
    background-color: blue; 
    position:relative; 
    z-index:1; 
} 

#middle { 
    width: 100%; 
    height: 200px; 
    z-index: 0; 
    position: relative; 
    background-color: orange; 
}