CSS IE7 z-index

Question

I'am cercando di generare il grafico come questo:

ma ottengo:

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> 

Il problema principale è che il codice html deve essere certo come specificato sopra. Vi prego di darmi un consiglio su quale codice CSS ho bisogno per implementare questa funzione (deve essere compatibile con IE7 +). O forse JS ti aiuterà per questo? Sarò felice per qualsiasi consiglio.

Answer 1

L'attributo CSS z-index è rilevante solo per gli elementi che si trovano allo stesso livello nella gerarchia DOM. Pertanto il valore di z-index posto su rosso è irrilevante. Solo lo z-index sulla materia blu e verde. Dato che l'indice z di blu è superiore a quello verde, appare in alto. Sebbene contro-intuitivo, è conforme alle specifiche.

Non sono presente una correzione che non comporta la modifica dell'HTML, sia staticamente che in fase di esecuzione utilizzando JavaScript. Per esempio. se il rosso è apparso allo stesso livello del blu e del verde, dovrebbe funzionare bene.

Answer 2

Questo è più facile di quello che stai facendo per essere. Se si nidifica ogni div all'interno di un altro, il layout si prende cura di se stesso. C'è un JSFiddle here con codice qui sotto:

<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

Rimozione z-index regola per div verde might do the trick. Il problema è che non funzionerà in IE7. IE8 + e altri, tuttavia, dovrebbero andare bene.

Answer 4

Tutto quello che dovete fare è rimuovere position: absolute da #green (z-index su questo div diventa anche inutile quindi). Funziona su tutti i browser inclusi IE6 e IE7.

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