z-index y ie 7.0

[popi]

Buenas a todos,

Tengo un problema con z-index y ie 7.0, les cuento con un ejemplo:

Código HTML:

<div style="width:30px;height:100px;position:absolute;top:0px; background-color:#FF0000;">
   <div style="width:100px;height:30px;position:absolute;z-index:-1; background-color:#00FF00;"></div>

</div> 

Esto es una esquematización del problema que tengo. Estos 2 div se comportan de formas diferentes en ie 7.0 y el resto de Navegadores.

Con IE el div verde se muestra encima del rojo, en el resto de navegadores me sale el verde debajo del rojo.

Como puedo hacer que ie 7.0 me haga lo mismo que los demás navegadores ?

Gracias por adelantado y Saludos !!!

[cristian_cena]

Probá con esto:

Código CSS:

#wrap{
position:relative;
/* width: el que quieras mayor a 100px;  esta capa solo la ponemos para que sirva de referencia a la hora de tomar las cotas (top/left/right/bottom) de sus hijos absolutos*/
}
#cero, #uno{position:absolute;}
#cero{
width:30px;
height:100px;
z-index:0;
top:0px;
background-color:#FF0000;
}
#uno{
width:100px;
height:30px;
z-index:1;
background-color:#00FF00;
}
 

Código HTML:

<div id="wrap">
<div id="cero"></div> 
<div id="uno"</div>
</div>
 

Para más detalles podes ver este tutorial: http://es.html.net/tutorials/css/lesson15.php

[popi]

Perfecto Cristian,

Has dado en el clavo, funciono, tu ejemplo me ha servido mucho para reestructurar el código para que me funcione.

Mil gracias i saludos !!!