La venganza de z-index (no obcedece)

[Rankxerox1984]

Hola a todos/todas:

Tengo una serie de div (4) que contienen un texto y una imagen png (casualmente de texto también) con dos estados "normal" y "hover".
La cosa funciona así (al menos eso deseo) en estado normal solo se ve el texto que es un título y al pasar el ratón por encima se inicia el estado Hover que cambia las dimensiones del div y carga la imagen de fondo/texto.
Todo lo anterior funciona, el problema lo tengo con el solapamiento de la imagen sobre los otros div's que he intentado hacer mediante z-Index pero no funciona.
Aquí les dejo el código por si alguien se ha encontrado en un caso similar y lo ha resuelto.
La mayoría de formatos son esquinas redondeadas y sombras

Código:

#tecno {position:relative;z-index:1; float:left; left:50px; margin:10px; width: 230px; height:40px; text-align:center;font-family: font-family:Arial, Helvetica, sans-serif;font-size:14px;color:#050505; }

#tecno :hover {position:relative; z-index:2; width: 328px; margin-top:-220px; height:294px;  text-align:center;  font-size:22px; color:#483D8B; background: url(../img/RecProg.png);background-repeat:no-repeat; 
       	-khtml-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;
       	-khtml-box-shadow:rgba(0,0,0,0.5) 0 2px 3px;-ms-box-shadow:rgba(0,0,0,0.5) 0 2px 3px;-o-box-shadow:rgba(0,0,0,0.5) 0 2px 3px;-moz-box-shadow:rgba(0,0,0,0.5) 0 2px 3px;-webkit-box-shadow:rgba(0,0,0,0.5) 0 2px 3px;box-shadow:rgba(0,0,0,0.5) 0 2px 3px; }

#tecno1 {position:relative; z-index:1; float:left; left:50px;margin:10px; width: 200px; height:40px; font-family: font-family:Arial, Helvetica, sans-serif;font-size:14px;color:#050505; }
        #tecno1 :hover {position:relative; z-index:2;  width: 328px; margin-top:-325px; height:399px; text-align:center;  font-size:22px; color:#483D8B; background: url(../img/OS.png);background-repeat:no-repeat; 
       	-khtml-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;
       	-khtml-box-shadow:rgba(0,0,0,0.5) 0 2px 3px;-ms-box-shadow:rgba(0,0,0,0.5) 0 2px 3px;-o-box-shadow:rgba(0,0,0,0.5) 0 2px 3px;-moz-box-shadow:rgba(0,0,0,0.5) 0 2px 3px;-webkit-box-shadow:rgba(0,0,0,0.5) 0 2px 3px;box-shadow:rgba(0,0,0,0.5) 0 2px 3px; }

¡Muchas gracias por la ayuda!

J.

[cristian_cena]

Nunca dos cajas relativas podrán superponerse.
Podrías crear un contenedor relativo para #tecno y #tecno1.
Luego pasar a absoluta la posicion de la caja que desees dejar abajo (supongo: #tecno pues le diste menor valor de z-index). O bien usar posicion absoluta para ambas cajas.

No hace falta que repitas el codigo en :hover, nada más incluye aquello extra a lo ya definido.

pd: controla que las cajas flotadas tengan siempre un padre con overflow:hidden; (o similar, + info: googlear "limpiar los float") sino su contenedor mágicamente tomará un height igual a cero.

Saludos.