Pues el problema está en lo siguiente:
tengo el div contenedor que a su vez tiene otros divs (el ejemplo de más arriba)
Bien el div contenedor se repite n veces ya que la página en cuestión es una página de resultado de una búsqueda. Cuando rollover sobre el div .descripcion, se muestra el div .elementoOculto. El tema está en que el div .elementoOculto es mucho más alto que el propio div .contenedor, con la explicación anterior se solucionó el tema que se muestre sobre dicho div, pero la imagen del div .descripción de los resutados siguientes salen sobre el div elementoOculto del anterior.
No se si me he explicado bien,pongo un ejemplo:
Por lo que sé el atributo z-index solo vale con padres y sus hijos, por eso digo lo de javascript...
Código:
<div class="granContenedor">
<div class="contenedor"><!--primer resultado -->
<div class="contenidoIzquierda">.....contenido</div>
<div class="contenidoDerecha">
<div class="descripcion">imagen</div>
<div class="elementoOculto">....contenido</div>
</div>
</div>
<div class="contenedor"><!-segundo resultado -->
<div class="contenidoIzquierda">.....contenido</div>
<div class="contenidoDerechaa">
<div class="descripcion">imagen</div>
<div class="elementoOculto">....contenido</div>
</div>
</div>
......
......
......
<div class="contenedor"><!--resultado n -->
<div class="contenidoIzqueirda">.....contenido</div>
<div class="contenidoDerecha">
<div class="descripcion">imagen</div>
<div class="elementoOculto">....contenido</div>
</div>
</div>
</div>
Las clases:
Código:
.granContenedor {
max-width:1100px;
padding-top:1.5em;
position:relative;
z-index:333;
}
.contenedor {
border-bottom: 2px solid #5A5A5A;
height: 1%;
max-width: 1100px;
padding: 16px 0 12px;
position: relative;
z-index: 20;
}
.contenidoIzquierda {
float:left;
......
}
.contenidoDerecha {
float:left;
position:relative;
z-index:10
}
.contenidoOculto {
background: none repeat scroll 0 0 #F5F5F5;
border: 2px solid #7B7A7A;
box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.75);
display: none;
left: 0;
padding: 14px;
position: absolute;
text-align: left;
top: -70px;
width: 290px;
z-index: 100;
}