Ver Mensaje Individual
  #1 (permalink)  
Antiguo 05/01/2012, 13:41
moises_13__35
 
Fecha de Ingreso: febrero-2011
Mensajes: 6
Antigüedad: 13 años, 2 meses
Puntos: 0
Pregunta 5min-Ayuda con z-index

Buenos días/tarde/noche a todos soy Moisés y les deseo un prospero año 2012.
Bueno mi problema es el siguiente: tengo 6 div, tres de ellos son padres y cada uno de estos tienen un div hijo. Lo que quiero es que cada div hijo este por detrás de su padre, pero delante de los demás div.

Solo consigo este resultado con div hermanos, cosa que no entiendo, porque creía que la propiedad z-index actuaba independientemente de si es padre, hijo o hermano.
Lo he intentado todo como nunca 6 días con el mismo problema. He intentado con todas las position, con valores muy altos de z-index, con !important y nada.
Como ya dije solo lo consigo un resultado similar cuando son hermanos, pero no me convence ya que al ser hermanos para poder obtener el resultado de al pasar el mouse por DIV1 y que se muestre DIV2 utilizo #DIV1:hover + #DIV2{Visibility:visible;} este se muestra, pero al intentar posicionarme sobre el desaparece, solo se muestra mientras este sobre DIV1.
Sin embargo cuando estos son padre e hijo (#DIV1:hover #DIV2 {Visibility:visible;}) puedo posicionarme sobre DIV2 sin miedo a que se vuelva a ocultar.

Código CSS:
Ver original
  1. #P1, #P2, #P3
  2. {
  3.    border:2px solid #000;
  4.    background-color:#06F;
  5.    position:absolute;
  6.    left:5px;
  7.    width:155px;
  8. }
  9. #P1{top:15px;z-index:100 !important;}
  10. #P2{top:45px;z-index:80 !important;}
  11. #P3{top:75px;z-index:60 !important;}
  12.  
  13. #H1, #H2, #H3
  14. {
  15.    border:2px solid #000;
  16.    background-color:#0C0;
  17.    position:absolute;
  18.    left:80px;
  19.    width:80px;
  20.    text-align:center
  21. }
  22. #H1{top:15px;z-index:90 !important;visibility:hidden;}
  23. #H2{top:-2px;z-index:70 !important;visibility:hidden;}
  24. #H3{top:-2px;z-index:50 !important;visibility:hidden;}
  25.  
  26. #P1:hover + #H1{visibility:visible;}
  27. #P2:hover #H2{visibility:visible;}
  28. #P3:hover #H3{visibility:visible;}

Código HTML:
Ver original
  1. <div id="P1">PADRE1</div>
  2. <div id="H1"><br />HIJO1 Debajo del padre encima de los demás.</div>
  3. <div id="P2">PADRE2<div id="H2"><br />HIJO2 Debajo del padre encima de los demás.</div></div>
  4. <div id="P3">PADRE3<div id="H3"><br />HIJO3 Debajo del padre encima de los demás.</div></div>

Aquí tenéis el ejemplo [URL="http://galeon.com/prueba-moi/Untitled-2.html"]http://galeon.com/prueba-moi/Untitled-2.html[/URL]
La primera fila funciona, ya que son hermanos, pero no puedes posicionar el mouse sobre HIJO1.
Sin embargo si puedes hacerlo con los otros dos (HIJO2 e HIJO3), pero estos no se sitúan detrás de sus padres.

En definitiva, quiero obtener el resultado de la imagen siendo estos padre e hijo.


Muchas gracias a todos de antemano
Saludos.