CSS IE7 índice z

Question

Iam tratando de generar el gráfico de la siguiente manera:

pero me sale:

CSS:

#green { height: 500px; width: 500px; background-color: green; position:absolute;z-index:13; } 
    #red { height: 300px; width: 300px; background-color: red; position:absolute; z-index:17; } 
    #blue { height: 400px; width: 400px; background-color: blue; position:absolute; z-index:15;} 

HTML:

<div id="blue"></div> 
<div id="green"> 
    <div id="red"></div> 
</div> 

El principal problema es que el código html debe ser cierto como lo especifico arriba. Por favor, dame consejos sobre qué código CSS necesito para implementar esta característica (debe ser compatible con IE7 +). O tal vez JS ayudará con esto? Estaré encantado de recibir algún consejo.

Answer 1

El atributo CSS z-index solo es relevante para los elementos que existen en el mismo nivel en la jerarquía DOM. Por lo tanto, el valor del índice z colocado en rojo es irrelevante. Solo el índice z sobre materia azul e verde. Como el índice Z azul es más alto que el verde, aparece en la parte superior. Si bien no es intuitivo, cumple con las especificaciones.

No estoy allí es una solución, no implica la modificación del HTML, ya sea estáticamente o en tiempo de ejecución mediante JavaScript. P.ej. si el rojo aparece en el mismo nivel que el azul y el verde, debería funcionar bien.

Answer 2

Esto es más fácil de lo que imagina. Si anida cada div dentro de otro, el diseño se ocupa de sí mismo. Hay una JSFiddle here con código de abajo:

<div id="green"> 
    <div id="blue"> 
     <div id="red"></div> 
    </div> 
</div> 

---

#green 
{ 
    width: 400px; 
    height: 400px; 
    background: green; 
    position: absolute; 
} 

#green #blue 
{ 
    width: 300px; 
    height: 300px; 
    background: blue; 
} 

#green #blue #red 
{ 
    width: 200px; 
    height: 200px; 
    background: red; 
} 

Answer 3

Extracción z-index regla para div verde might do the trick. El problema es que no funcionará en IE7. IE8 + y otros, sin embargo, deberían estar bien.

Answer 4

Todo lo que tiene que hacer es eliminar position: absolute de #green (z-index en este div también es innecesario). Funciona en todos los navegadores, incluidos IE6 e IE7.

Fiddle: http://jsfiddle.net/PD83G/.