5min-Ayuda con z-index

[moises_13__35]

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:

#P1, #P2, #P3
{
   border:2px solid #000;
   background-color:#06F;
   position:absolute;
   left:5px;
   width:155px;
}
#P1{top:15px;z-index:100 !important;}
#P2{top:45px;z-index:80 !important;}
#P3{top:75px;z-index:60 !important;}
 
#H1, #H2, #H3
{
   border:2px solid #000;
   background-color:#0C0;
   position:absolute;
   left:80px;
   width:80px;
   text-align:center
}
#H1{top:15px;z-index:90 !important;visibility:hidden;}
#H2{top:-2px;z-index:70 !important;visibility:hidden;}
#H3{top:-2px;z-index:50 !important;visibility:hidden;}
 
#P1:hover + #H1{visibility:visible;}
#P2:hover #H2{visibility:visible;}
#P3:hover #H3{visibility:visible;}
 

Código HTML:

<div id="P1">PADRE1</div>
<div id="H1"><br />HIJO1 Debajo del padre encima de los demás.</div>
<div id="P2">PADRE2<div id="H2"><br />HIJO2 Debajo del padre encima de los demás.</div></div>
<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.

[memoadian]

yo en lo personal, usaria javascript, y un onclick u onmouseover que cambie el z-index del hijo y obviamente el display, no estoy seguro si se puede lograr ese mismo efecto con css, que creo que ya se puede pero no estoy seguro.

[mariomon17]

Se puede hacer con CSS sin necesidad de JavaScript.

Tu error esta en que z-index solo se puede usar en elementos posicionados, es decir, en elementos que tengan position absolute, fixed o relative.

Un saludo :)

[moises_13__35]

Muchas gracias amigo memoadian, pero preferiria hacerlo en css.
mariomon17 no entiendo lo que quieres decir. ¿Podrias decirme en que linea esta mi error o decirme que deberia cambiar?
No se si no has visto las etiquetas "position" que están en la lineas 5 y 17 de css o si las he colocado mal. Así que si me pueden ayudar y resolver estas dudas que me invaden la cabeza gracias a mariomon17, lo agradeceria mucho.
De todas maneras y aunque la respuesta me sea de poca ayuda gracias por responder.

[kseso?]

Lo primero es sopesar y elegir el marcado html en función del contenido y de lo que queramos hacer con él.

Lo primero lo desconocemos, Moises no lo ha comentado. Pero me arriesgaré.
Tiene toda la pinta de poderse realizar con listas anidadas sin faltar demasiado a la semántica.
Se lo enfoco como si fuese una lista con contenido desplegable (oculto inicialmente y visible al :hover)

Código HTML:

<ul>
<li><span>padre 1</span>
      <div> contenido a mostrar</div>
</li>
...
</ul>
 

Código CSS:

li > span {
   position: relative;
   display: block;
   z-index: 1;
   /*resto de propiedades*/
   }
li > div {
   display: none;
   position: absolute;
   /*resto de propiedades*/
   }
li > span:hover {z-index: 5;}
li > span:hover ~ div {
   z-index: 2;
   /*resto de propiedades*/
   }
 

Así se evitará enfrentarse a que los hijos tengan un z-index mejor que su ancestro, pues ya estará trabajando con hermanos.

Nota: advertir que sólo contemplo el tema del z-index, sin entrar en cuestiones de posicionamiento, medidas, etc.

[mariomon17]

Cierto, no vi los position. Perdon.
El ejemplo de kseso? funciona perfectamente ;)

Un saludo.

[moises_13__35]

Os he mostrado un imagen de lo que quiero conseguir.
Os he mostrado el HTML y el CSS.
Os he mostrado un ejemplo de la web.
---Os he mostrado un ejemplo cuando son hermanos que si me funciona. Pero no me gusta el resultado.
---Os he mostrado un ejemplo cuando son padre e hijo que no me funciona.
Y pedia que me ayudaseis a conseguir el aspecto de la imagen, siendo estos PADRE e HIJO.
Aunque no hayais sabido ayudarme enteramente a conseguir lo que pedia (linea de arriba) kseso? me hizo prender la bombilla al poner la siguiente fila de código li > span:hover {z-index: 5;}.
Ahora quisiera que me respondieseis a una cosa. ¿Se puede en Mozilla Firefox poner un div hijo por detrás de su div padre? Si es asi ponedme un ejemplo claro y completo.
A continuacion dejo dos paginas web.
La 1ª http://galeon.com/prueba-moi/Untitled-4.html similar al ejemplo de kseso? en la que se utiliza tres etiquetas li, span y div. que funciona en Chrome, Safari y Firefox.
La 2ª http://galeon.com/prueba-moi/Untitled-6.html con dos etiquetas div padre y div hijo funciona correctamente en Chrome y Safari, pero no se porque Firefox no reconoce el z-index muchísimo menor del hijo respecto al padre.
Tenéis ahí los dos ejemplos creo que todos sabemos mirar su código fuente, así que ayudadme por favor que estoy empezando a perder el amor que sentía a la programación al ver que hay que programar 5 paginas diferentes una para cada navegador.

[memoadian]

Iniciado por moises_13__35

así que ayudadme por favor que estoy empezando a perder el amor que sentía a la programación al ver que hay que programar 5 paginas diferentes una para cada navegador.

Eso te hace perder el amor?

entonces no sigas adelante hermano, estas cosas son las que me hacen pensar más

por eso decia lo de javascript, asi todos contentos pero quieres puro css y luego mueres.

suerte.

[ZoroRoronoa]

Ok, te ayudamos...
Mira este code... Es un ejemplo solamente.
Tomando el mismo que kseso? te dio.

Pero completo... analizalo.

Código HTML:

<html>
<head><style>
li > span {position:relative; display:block; z-index:1; background:red; width:300px; margin-top:5px;}
li > div {display:none; position:absolute; background:green; height:120px;}
li > span:hover {z-index:5;}
li >span:hover ~ div {z-index:2; display:block;}
</style></head>
<body>
<ul>
    <li>
        <span>title 1</span>
        <div> a mostrar 1</div>
    </li>
    <li>
        <span>title 2</span>
        <div> a mostrar 2</div>
    </li>
    <li>
        <span>title 3</span>
        <div> a mostrar 3</div>
    </li>
</ul>
</body>
</html>
 

Saludos.

PD: Es imposible hacerlo si o si con "padre e hijo", aunque al padre le pongas un z-index "un millon", el hijo siempre estara por encima de el.
No le pierdas el amor, mejor aprende a ser "semantico" y la "teoria" del "funcionamiento" del CSS.

PD2: Imaginate... querer hacer un carro de gasolina que soporte 30 pasajeros con plastilina...
Si o si, si no, mejor ya no me dedico a nada....
Es ironico, no crees?

1.- Esa alternativa que te da kseso? y la cual use yo, es la definitiva.
2.- O bien como te dicen... usa JavaScript.
3.- O por ultimo... Todo saldria bien usando "padre e hijo" pero tendrias que quitar eso de "QUE APAREZCA ABAJO DEL PADRE", pues es imposible asi como lo planteas lograrlo.

[moises_13__35]

Iniciado por memoadian

estas cosas son las que me hacen pensar más
por eso decia lo de javascript, asi todos contentos pero quieres puro css y luego mueres.

suerte.

Jajaja muero muero
Lo que no comprendo es porque Chrome y Safari interpretan el css como tiene que ser, porque según he leído que el z-index funciona independiente del padre que del hijo. Entonces si es así porque Firefox no interpreta bien esta propiedad.

Bueno yo de momento tengo esta solución siendo padre e hijo http://galeon.com/prueba-moi/Untitled-4.html
Ventajas: pues que consigo el resultado que quiero.
Desventajas: tengo que utilizar una etiqueta demás que está en vacía.

Aquí esta la otra opción http://galeon.com/prueba-moi/Untitled-6.html con solo dos etiquetas como tiene que ser, padre e hijo.
Ventajas: solo dos etiquetas.
Desventajas: Firefox no le gusta esto y no quiere interpretarlo como bien lo hacen Chrome y Safari.

El motivo por el que quiero que sean padre he hijo es que cuando estos son padre e hijo (#DIV1:hover #DIV2 {Visibility:visible;}) puedo posicionarme sobre DIV2 sin miedo a que se vuelva a ocultar. Pero cuando son hermanos usamos más (+) o la virgulilla (~) (#DIV1:hover + #DIV2 {Visibility:visible;} o #DIV1:hover ~ #DIV2 {Visibility:visible;}) al intentar posicionarme sobre DIV2 este se oculta (Visibility:hidden;) y yo quiero que los usuarios puedan posicionarse sobre el DIV2 para seleccionar, copiar o simplemente porque les sea mas cómodo.

La otra condición que queria era que el Div padre esté por delante que el Div hijo.

En definitiva tras leer el mensaje de

Iniciado por ZoroRoronoa

PD: Es imposible hacerlo si o si con "padre e hijo", aunque al padre le pongas un z-index "un millon", el hijo siempre estara por encima de el.

El tema se termina, a menos que alguien nos de otra opción (en CSS).
Así que si alguien en el futuro esta en la misma situación que yo, le sugeriría que usara este ejemplo http://galeon.com/prueba-moi/Untitled-4.html ya que aunque utiliza una etiqueta demás da el resultado esperado o utilizar JS como dicen algunos amigos :D.

Muchísimas gracias a todos y perdón por todas las molestias causadas, lo único que espero es quitar de dudas a otros como yo que cayeron en las incoherencias de z-index :D

[kseso?]

Como esta intro

Iniciado por moises_13__35

Os he mostrado un imagen de lo que quiero conseguir.
Os he mostrado el HTML y el CSS.
Os he mostrado un ejemplo de la web.
---Os he mostrado un ejemplo cuando son hermanos que si me funciona. Pero no me gusta el resultado.
---Os he mostrado un ejemplo cuando son padre e hijo que no me funciona.
Y pedia que me ayudaseis a conseguir el aspecto de la imagen, siendo estos PADRE e HIJO.
Aunque no hayais sabido ayudarme enteramente a conseguir lo que pedia...

parece que es en respuesta a

Iniciado por kseso?

Lo primero es sopesar y elegir el marcado html en función del contenido y de lo que queramos hacer con él.

Lo primero lo desconocemos, Moises no lo ha comentado. Pero me arriesgaré.

Matizo o amplio o explico mejor:
Al planificar el marcado html es básico saber qué contendrán dichas etiquetas y qué pretendemos hacer sobre ellas vía css (en este caso).
Con la información facilitada, que no la he calificado en ningún momento, yo al menos no se si pretende hacer, por ejemplo, un menú desplegable o unas tabs.
De ahí que sugiriese con mucha cautela y como ejemplo de aproximación la posibilidad de crear una lista (ul).

Si ha intentado por activa y pasiva el tema del z-index padre/hijo y en casi todos le funciona menos en firefox, y si su código estuviese libre de errores (pase los validoadores) entonces ya tiene la respuesta. Que el comportamiento yo creo que más que un bug es una cuestión de concepto, ¿puede estar un elemento por debajo (eje z) del que lo contiene? Si el z-index es heredado, esto es, se aplica a la caja declarada y a todo su contenido, si declaramos un nuevo z-index a un hijo ¿el nuevo valor debería modificar al asignado a su padre? Recuerde que en css no hay selector de ascendente.

Si quiere seguir con la estructura padre-hijo sin superponer, hágalo como siempre se han realizado los menús desplegables. Posicionados respecto a su contenedor con el punto exacto (al px).
Y para evitar su ocultación al :hover, también está presente en muchas realizaciones:

Código CSS:

.padre:hover .hijo, padre:hover .hijo:hover {display: block; position:...}
 

por ejemplo.

Complementario:
Hace unas fechas hubo una consulta parecida, no exactamente igual, a la suya:
http://www.forosdelweb.com/f53/z-ind...-texto-967465/