Errore z-index di Internet Explorer?

Question

Come si sovrappone un elemento a un altro elemento posizionato relativamente in Internet Explorer? Z-index non funziona, appare sempre dietro l'elemento relativamente posizionato.

Answer 1

Non stai per caso cercando di mettere qualcosa su una combobox (seleziona tag), iframe o filmato flash giusto?

In questi casi, z-index è una causa persa.

In caso contrario, quale versione del browser utilizzi e stai utilizzando il posizionamento assoluto?

Answer 2

Ho avuto un vero problema con questo problema che questa soluzione particolare non era rilevante per. E 'un po' difficile da spiegare quindi cercherò utilizzando il codice:

<div id="first" style="z-index: 2">In between</div> 
<div id="second" style="z-index: 1">In the back 
<div id="third" style="z-index: 3">Foreground</div></div> 

Il problema è che l'impostazione z-index del genitore di un valore più alto si muoverebbe in primo piano invece della parte posteriore dove il suo supposto per essere . Mi sono imbattuto per caso in una soluzione: ho fatto una copia dell'elemento in primo piano (id = terzo) all'esterno del suo genitore.

<div id="first" style="z-index: 2">In between</div> 
<div id="third" style="z-index: 3; visibility:hidden">Foreground</div> 
<div id="second" style="z-index: 1">In the back 
<div id="third" style="z-index: 3">Foreground</div></div> 

Vale la pena ricordare che nel mio codice originale gli elementi non hanno gli ID in modo da non soffro di 2 elementi che condividono la stessa e invalidanti mia HTML.

Penso che sia sicuro classificare questa stranezza come un altro bug che capita di aiutare con l'originale, ma funziona, almeno per me. Spero che qualcuno lo trovi utile!

Answer 3

Volevo notare che se si utilizza IE8 e versioni successive, non supporta i filtri CSS3. Questo era il mio problema

usavo:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@black00', endColorstr='@black00', GradientType=0); 

Non importa quello che ho impostato la mia posizione o z-index per, non si poteva vedere l'altro strato perché stava causando una maschera completo su quello strato (invece di andare da chiaro al nero e di nuovo libero).

Rimuovendo il filtro CSS3 solo per IE8, sono stato in grado di risolvere il mio problema.

Spero che questo aiuti qualcuno che si imbatte nello stesso problema.

Answer 4

Creare e quindi impostare un'immagine di sfondo trasparente aggiuntiva sull'elemento che si desidera avere sopra. Per me ha finalmente funzionato in IE8. SASS:

#galerie-link { 
    position: absolute; 
    z-index: 1000; 
    top: 25px; 
    left: 40px; 
    a { 
     display: block; 
     width: 185px; 
     height: 90px; 
     background-image: url(../images/transparent.png); 
    } 
    } 

Answer 5

Sembra che io stia scherzando, ma non sono

.myLinkCssClass { 
    background   : url(#); 
} 

Answer 6

Ho avuto lo stesso problema in un html in cui molti relativi posizionato div ripetute bloccavano vista di div assoluta posizionato. La soluzione alternativa fornita da www.brenelz.com, che ho già utilizzato con successo, non funzionava in questo caso. Quindi, il seguente ha funzionato per me: Ho rimosso il posizionamento relativo da quei div che ho menzionato per primi, poi ho aggiunto un CSS per attivare quei div su relativo quando si passa il mouse.Lascia che ti mostri il codice:

Prima:

DivThatYouMustHover { 
height: 300px; 
position: relative; 
width: 200px; 
} 

Dopo:

DivThatYouMustHover { 
height: 300px; 
width: 200px; 
} 
DivThatYouMustHover:hover { 
position:relative; 
} 

In questo modo gli altri 'sorelle' di quel soggiorno div con il posizionamento normale e non interferiscono con la disposizione. Ha funzionato molto bene per me! Mi auguro possa aiutare anche te.