Z-index, ¿como evitar su herencia fuera del primer padre?

[Albuss]

Hola, caballeros!

Estoy intentando sin exito algo tan simple (en la teoría) como esto :

div 1 { z-index: 2; position:relative;}
div 2 {z-index:3; position:relative;}
div 3 {z-index:1;position:relative;}

Sintaxis html: <div1><div2><div3></div></div></div>

¿Como hacer que div3 realmente tenga un valor real de z-index:1 fuera de div2?


Ps:no puedo recurrir a iframes.

[ryugen]

Un hijo no puede estar detrás de su padre, porque se encuentra en "contexto de apilado" (stacking context) diferentes.
Este link puede ayudarte, pero en resumen te dice lo que te estoy diciendo el z-index de un hijo no tiene nada que ver con el del padre, por el contexto en el cual se estan apilando.
https://developer.mozilla.org/en/Und...acking_context

[Albuss]

¿Alguna solucion factible creativa? , seguramente es mucho pedir un milagro xD

He subido un ejemplo snecillo de lo que quiero solucionar en otro proyecto mucho mas complejo:

http://www.vodoad.com/Untitled-1.html


El cuadrado mas oscuro(el mas pequeño) no puede verse sobre el primer cuadrado mas claro(el mas grande),

[ryugen]

Para las soluciones creativas se requiere un poco de contexto.

Realmente esos div que son, que representan, como se generan.

Para soluciones a estas problemas se necesita romper un poco con las reglas.

[Albuss]

Bueno , estoy experimentando, con soluciones creativa, me refiero a alternativas viables, cambio de sintaxis ... ect


Las animaciones son keyframes CSS3 , el codigo es simple, lo puedes inspeccionar, el problema es que es un problema muy resumido de un proyecto que he empezado hace semanas, en el cual tengo en resumen el mismo problema.

Usar iframes quizas no sea tan mala idea

[ryugen]

Como dices, en el ejemplo los z-index no responden, cual sería el resultado final deseado ?

Puedes plasmarlo en una imagen?

[Albuss]

Pero si ya lo he dicho xD


Graficamente seria asi:http://www.vodoad.com/Untitled-3.html , solo que en este ejemplo el div mas oscuro no esta dentro de ningun otro div.

Lo que quiero es lo que ves hay, teniendo en cuenta que en el ejemplo que expuse al princio, el div oscuro es hijo de otro div que asu vez es hijo del div grande de todo.

[kseso?]

Con css no puede lograr que un elemento esté fuera y después dentro de otro en el etiquetado html. Otra cosa es que visualmente parezca que. Esto es, posicionarlo dentro o fuera de su ancestro. Pero sólo a efectos visuales. Nunca a nivel de código html.

Por otro lado, en los gecko (firefox incluido), el z-index lo procesa, para entendernos, anteponiendo al valor declarado del hijo, el del padre (computado o declarado).
Esto es, si el padre tiene un valor de 50, los hijos entre ellos y con relación a su padre es como si tuviesen 50.X, 50.Y etc, por lo que nunca se mostrarán por debajo de su padre.

En su caso, si necesita que una caja pase por debajo de otra (eje z) debe escribirlo en el html fuera (ser hermanos o descendiente de un hermano)
De esta manera puede posicionarlo inicialmente en una posición determinada y cambiarla con las @keyframes.

[Albuss]

Gracias por toda la info, pero creo que va a ser mejor, mas limpio, y menos estresante usar un Iframe, cosa que rechazaba al principio, pero visto lo visto ...

[C2am]

Hola
La verdad que no se mucho de @keyframes, pero ¿que tiene que ver con un iframe?

[kseso?]

Iniciado por C2am

Hola
La verdad que no se mucho de @keyframes, pero ¿que tiene que ver con un iframe?

Lo mismo que chacha con chachachá
Nada.