css3 sombra paralela en otro div, el índice z no funciona

Question

estoy tratando de usar una sombra paralela para que parezca que un div (el encabezado) está "por encima" de otro. mi problema es que el div "medio" está cubriendo la sombra paralela. Intenté usar z-index para colocar el div del encabezado sobre el div del medio, pero no funciona (la sombra aún está cubierta). cuando pongo un descanso entre los divs, puedo ver la sombra y, por lo tanto, sé que parte del código está funcionando correctamente. Tengo el siguiente código html:

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

y esto 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; 
} 

alguna idea? Gracias.

Answer 1

La propiedad z-index sólo funciona en relativa, absolutos o elementos posicionados fijos.

Intenta dar tu div #middle a position: relative.

Answer 2

z-index no funcionará si sus elementos no son position:absolute

Answer 3

Pruebe una sombra de cuadro insertada en el elemento que desea que aparezca debajo.

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

Hacer esto aliviará el shuffle z-index y usted será mucho más feliz en el largo plazo.

Answer 4

Sobre la base de las otras respuestas aquí, encontré que esto funcionó mejor al poner position: relative en #portal_header_light, en lugar de #middle. Entonces no tuve que tener z-index: -1, que (al menos en Chrome) estropeó los efectos de desplazamiento del enlace del cursor y causó algunos otros problemas extraños.

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

Este es el código simplificado:

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