z-index imágenes de fondo

[vitu_16]

Hola a todos:

Estoy iniciandome en el css, pero no consigo posicionar dos imágenes (que harian de fondo izquierdo y derecho) y lo quisiera tener asi para poder poner una sombra en el #principal con css3 pero me lo tapan las imagenes, ¿Sería posible?¿Sería mejor de otra forma? mi código seria el siguiente:

#principal{
position:relative;
width:700px;
margin:0 auto;
height:1000px;
background:black;
}
#izquierda{
background:url(imagenizq.gif)no-repeat;
width:40px;
height:1000px;
position:absolute;
top:0;
left:-40px;
}
#derecha{
background:url(imagendrch.gif)no-repeat;
width:40px;
height:1000px;
position:absolute;
top:0;
right:-40px;
}

<div id="principal">
<div id="izquierda"></div>
<div id="derecha"></div>
</div>


Les agradezco de antemano su valioso tiempo. Muchas gracias

[RafaRG]

mm, el propio título de tu pregunta lo dice: "z-index" XD
¿has probado a ponerlo?

[cristian_cena]

estos links te serán de utilidad:
http://es.debugmodeon.com/articulo/c...-capas-con-css
http://jsfiddle.net/cristian_cena/xY5Re/

Saludos

[kseso?]

cristian_cena:
la 2ª condición no se necesita (el que sean hermanos).
Quizás te haya inducido el que en ie6 para que aplicase el z-index a descendientes en distinto nivel de profundidad, los ancestros también tenían que tenerlo declarado (creo recordar).

[cristian_cena]

wow, cierto pues, siempre tube ese tabú de que debían ser hermanos. Excelente aclaración estimado kseso