Impossibile ottenere Box-Shadow per apparire sopra Div

Question

Ecco un esempio di ciò che sto cercando di realizzare. http://jsfiddle.net/QqME6/

L'ombra del riquadro dal div superiore non viene visualizzata sopra il div al di sotto di esso. Da quello che ho capito, ho bisogno di impostare lo z-index in modo che appaia in cima e che funzioni solo sugli elementi con position: relative; ma non viene ancora visualizzato. Che cosa sto facendo di sbagliato?

<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

E '#top e la sua box-shadow che si desidera visualizzare sulla parte superiore, in modo da dare che position: relative invece di dare position: relative-#middle. Non è necessario per z-index: 0.

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

Answer 2

Cambia la tua 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; 
}