DIV con Sombra CSS por encima de otro div

buenas... ese es el problema.

tengo un div por encima de otro div. el de arriba tiene una sombra creada con box-shadow

lo que me ocurre es que el div de abajo me tapa la sombra... no sé como explicarlo. Probe cambiando el z-index del de abajo en -9999 y subiendo el de arriba hasta 9999 y nada tampoco.

Sube tu HTML y CSS a un JsFiddle para poderte asistir mejor.

está subido a http://www.artabria.es

de paso me decis como se podría mejorar la cosa... que siempre se puede!

Gracias!

No entiendo muy bien lo que tienes pero te pongo este codigo y tu dime que te falta y que te sobra saludos
.arriba {
background:#00cc00;
width:120px;
padding:2px;
}
.abajo{
background:#cc0000;
width:120px;
padding:2px;
box-shadow:-2px -2px 5px;
}
Epero que te pueda ayudar

La sombra de #pase debe quedar por encima de #margen?

quita tus z-index...

y a #margen le agregas

Código CSS :

position:relative;
z-index:-1;

eso debería servir.

Nada... no puedo ponerle position:relative porque se me desmonta la plantilla.

los div que manejo son estos:

#margen{
margin: 10px auto;
width:820px;
border: 5px solid #FFF;
z-index: -1;
}

#hoja{
width:820px;
padding-top: 10px;
padding-bottom: 10px;
background: #FFF;
filter: alpha(opacity=80); /* internet explorer */
-khtml-opacity: 0.8; /* khtml, version anterior de safari */
-moz-opacity: 0.8; /* firefox, mozilla, netscape */
opacity: 0.8; /* safari, chrome, opera */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /*internet explorer 8 - gracias Andres */
z-index: -2;

}

y luego #principal que es en el que aparecen los post...

la idea no es que la sombra del slider tapara estos dos... la idea es hacer una banda lateral de 182px que flotara a la derecha todo a lo largo del body... desde los botones sociales hasta abajo de todo

la necesito para las pages, que tendrán botones de navegación a mayores... la historia es que esa 'banda' a la derecha del body, por debajo de estas dos y con toda la altura tendría position:fixed ->

problemas:
- la caja de sombra del slider
- la versión para móviles...

position:relative, no mueve el objeto de lugar...

Por cierto, tienes un #hoja arriba de header y otro #hoja dentro de margin... los id's no se deben repetir


Entonces no "flotes" la banda... ponla directo con position fixed y a esa le agregas el z-index:-1;
A los que queden por arriba de la banda position:relative; no deberían necesitar z-index.