Không thể có được Box-Shadow xuất hiện trên Div

Question

Đây là một ví dụ về những gì tôi đang cố gắng hoàn thành. http://jsfiddle.net/QqME6/

Bóng hộp từ div trên sẽ không xuất hiện ở đầu div bên dưới nó. Từ những gì tôi hiểu tôi cần phải thiết lập z-index để nó sẽ xuất hiện trên đầu trang và chỉ hoạt động trên các phần tử với position: relative; nhưng nó vẫn không xuất hiện. Tôi đang làm gì sai?

<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

Đó là #top và box-shadow của nó mà bạn muốn xuất hiện trên đầu trang, vì vậy cho rằng position: relative thay vì đưa ra position: relative-#middle. Không cần z-index: 0.

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

Answer 2

Thay đổi CSS của bạn để:

#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; 
}