Z-index in Internet Explorer non funziona

Question

Ho creato un menu per un sito per dispositivi mobili, quando si fa clic sul pulsante del menu si apre il menu, questa è la pagina;

http://www.roadtotheweb.com/m.about.html

L'unico problema è che in IE e Windows Phone il menu non è l'elemento più in alto in modo da diapositive dietro gli oggetti.

Ho provato a cambiare lo z-index, il tipo di posizione, hasLayout senza alcun risultato.

Apprezzerei qualsiasi tipo di assistenza.

J

Answer 1

Sembra che si potrebbe avere a che fare con un bug noto:

“In Internet Explorer posizionata elementi generano un nuovo contesto di stratificazione, a partire da un valore z-index pari a 0. Pertanto z-index non funziona correttamente.”

potete vedere il bug report sul Quirksmode sito web e una soluzione spiegato in this blog post.

Essenzialmente quello che dovete fare è avvolgerla in un elemento con più alto Z-index, ad esempio ecco un breve schizzo di una soluzione alternativa:

<div style="position: relative; z-index: 3000"> 
    <div style="position:absolute;z-index:1000;"> 
     ... 
    </div> 
</div> 

Answer 2

Se ancora non funziona, assicurarsi che la modalità di compatibilità è spento per il sito.

Answer 3

Scambia regolarmente due livelli, cambiando l'indice z da 0 a 1 e viceversa. Dopo anni, ha smesso di funzionare in IE. Ho cambiato lo z-Index in 1 e 2. Ora funziona bene. Penso che il bug abbia a che fare con un 0 z-Index.