Problema div y posiciones

[fr1974]

Tengo el siguiente codigo css y sus respectivos divs

Código:

<style>


#web_container
{
top:130px;
position:relative;
width:100%;
height:100%;
margin:auto;
}

#header_body_content
{
position:relative;
width:100%;
height:auto;
min-height:500px;
margin:auto;
border:0px solid;
}



#header_body_slide
{
width:980px;
height:250px;
margin:auto;
z-index:2;
}


#demo_position
{
top:100px;
position:absolute;
width:300px;
height:150px;
background-color:#FF0000;
left:50%;
z-index:1;
}
</style>



<div id="web_container">




<div id="header_body_content">


<div id="demo_position" style="z-index:1;"></div>
<div id="header_body_slide" style="z-index:2;"><img src="imagenes/imagen_1.jpg"></div>

</div>


</div>

El problema es que el div con el id "demo_position" quiero que vaya por detras del otro que es "header_body_slide" , pero aunque aplico z-index , etc , siempre se dispone por encima , hay alguna forma de solucionar esto ?

Saludos a todos y muchas gracias

[xFantaSx]

Hola,
Pues en ese caso deberías ponerle una posición: static/relative/absolute/fixed al #header_body_slide dependiendo lo que quieras.

[kseso?]

Iniciado por xFantaSx

Hola,
Pues en ese caso deberías ponerle una posición: static/relative/absolute/fixed al #header_body_slide dependiendo lo que quieras.

z-index Se aplica a: los elementos posicionados.
Static es el valor por defecto de position, y uno de sus efectos intrínsecos es que no posiciona a los elementos.