¿Error de Internet Explorer z-index?

Question

¿Cómo se superpone un elemento sobre otro que está relativamente ubicado en Internet Explorer? El índice Z no funciona, siempre aparece detrás del elemento relativamente posicionado.

Answer 1

No está por casualidad tratando de poner algo sobre un combobox (etiqueta de selección), iframe o película flash ¿verdad?

En esos casos, el índice Z es una causa perdida.

De lo contrario, ¿qué versión de navegador está utilizando y está utilizando la posición absoluta?

Answer 2

Tuve un gran problema con este problema que esta solución no era relevante para. Es un poco difícil de explicar, así que trataremos mediante código:

<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> 

El problema es que la fijación de índice z de los padres a un valor más alto se movería al primer plano en lugar de la parte de atrás donde su supone que es . Me encontré con una solución completamente por accidente: hice una copia del elemento en primer plano (id = third) fuera de su padre.

<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 mencionar que en mi código original de los elementos no tienen identificadores así que no sufro de 2 elementos que comparten el mismo y que invalidan mi HTML.

Creo que es seguro clasificar esta rareza como otro error que ayuda con el original, pero funciona, al menos para mí. ¡Espero que alguien lo encuentre útil!

Answer 3

Quería señalar que si está utilizando IE8 y versiones posteriores, no es compatible con los filtros CSS3. Este fue mi problema.

que estaba usando:

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

No importa lo que fijo mi posición o z-index para, no se podía ver la otra capa, ya que estaba causando una máscara completo sobre esa capa (en lugar de ir de claro a negro y borrar de nuevo).

Al eliminar el filtro CSS3 solo para IE8, pude resolver mi problema.

Espero que esto ayude a alguien que se encuentre con el mismo problema.

Answer 4

Cree y luego establezca una imagen de fondo transparente adicional en el elemento que desea tener en la parte superior. Para mí, finalmente funcionó en 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

Parece que estoy tomando el pelo, pero no estoy

.myLinkCssClass { 
    background   : url(#); 
} 

Answer 6

que tenía el mismo problema en un html donde muchos divs correspondientes ubicados en repetidas estaban bloqueando la vista absoluta de div posicionado. La solución provista por www.brenelz.com, que ya he utilizado con éxito, no funcionaba en este caso. Entonces, lo siguiente funcionó para mí: Eliminé el posicionamiento relativo de esos divs que mencioné primero, luego agregué un CSS para activar esos divs relativos cuando se pasa el mouse.Te voy a enseñar el código:

Antes:

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

Después:

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

De esta manera los otros 'hermanas' de esa estancia div con posicionamiento normal y no interfieren con la diseño. ¡Funcionó muy bien para mí! Espero que te ayude a ti también.