css3 drop shadow sotto un altro div, z-index non funziona

Question

Sto provando a usare un'ombra esterna per far sembrare che un div (l'intestazione) sia "sopra" un altro. il mio problema è che il div "medio" copre l'ombra esterna. Ho provato a usare z-index per mettere il header div sul medio div, ma non funziona (l'ombra è ancora coperta). quando metto una pausa tra i div, posso vedere l'ombra e quindi so che quella parte del codice funziona correttamente. Ho il seguente codice html:

<div id='portal_header_light'> 
<img src="Home.png" height="32px" \> 
<img src="Wrench.png" height="32px" \> 
</div> 
<div id='middle'></div> 

e questo css:

#portal_header_light { 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:12px; text-align:center; 
    -moz-border-radius: 3px 3px 3px 3px; 
    -webkit-border-radius: 3px 3px 3px 3px; 
    padding: 0px 3px 0px 3px; 
    background: -moz-linear-gradient(center top, #999999 0%,#ffffff 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #999999),color-stop(1, #ffffff)); 

    -webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3); 
    -moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3); 
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); 

    z-index:5; 
} 

#middle{ 
    height:308px; 
    background-color:white; 
    z-index:-1; 
} 

tutte le idee? Grazie.

Answer 1

La proprietà z-index funziona solo su relativa, assoluti o elementi fissi posizionati.

Prova a fornire il tuo div #middle a position: relative.

Answer 2

z-index non funziona se gli elementi non sono position:absolute

Answer 3

Provare un'ombreggiatura riquadro INS sull'elemento che si desidera visualizzare sotto.

.element-that-is-to-be-under{ 
    -webkit-box-shadow: inset 0 8px 4px -4px #ddd; 
    -moz-box-shadow: inset 0 8px 4px -4px #ddd; 
    box-shadow: inset 0 8px 4px -4px #ddd; 
} 

Facendo questo allevierà il riordino z-index e sarete molto più felice nel lungo periodo.

Answer 4

Sulla base delle altre risposte, ho trovato che questo ha funzionato meglio inserendo position: relative su #portal_header_light, anziché #middle. Quindi non dovevo avere z-index: -1, che (almeno in Chrome) ha incasinato gli effetti al passaggio del mouse sul collegamento e causato alcuni altri problemi.

http://jsfiddle.net/thaddeusmt/m6bvZ/

ecco il codice semplificato:

<div id="portal_header_light">Header Content</div> 
<div id="middle">Test Content</div> 

#portal_header_light { 
    position: relative; 
    padding: 3px; 
    background: #eee; 
    -webkit-box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, 0.3); 
    -moz-box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, 0.3); 
    box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.3); 
    z-index:5; 
} 

#middle{ 
    height:308px; 
    background-color:#fee; 
    padding: 3px; 
}