examples - css3 drop shadow en otro div, z-index no funciona

box shadow top css 3 generator

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

¿algunas ideas? Gracias.

Answer 1

La propiedad z-index solo funciona en elementos posicionados relativos , absolutos o fijos .

Intenta darle a tu div #middle una position: relative .

Answer 2

Pruebe con 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 cambio de índice Z y será mucho más feliz a largo plazo.

Answer 3

Sobre la base de las otras respuestas aquí, encontré que esto funcionaba 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/

Aquí está 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;
}

Answer 4

z-index no funcionará si tus elementos no están en position:absolute