Bogue d'index z d'Internet Explorer?

Question

Comment superposez-vous un élément à un autre élément positionné relativement dans Internet Explorer? Z-index ne fonctionne pas, il apparaît toujours derrière l'élément relativement positionné.

Answer 1

Vous n'essayez pas de mettre quelque chose au-dessus d'une combobox (étiquette de sélection), d'un iframe ou d'un film instantané?

Dans ces cas, l'index z est une cause perdue.

Sinon, quelle version du navigateur utilisez-vous et utilisez-vous le positionnement absolu?

Answer 2

J'ai eu un réel mal avec ce problème que cette solution de contournement particulière n'était pas pertinente pour. Il est un peu difficile à expliquer, donc je vais essayer d'utiliser le code:

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

Le problème est que la mise z-index de la société mère à une valeur supérieure se déplacerait au premier plan au lieu de l'arrière où son supposé être . J'ai trébuché sur une solution complètement par accident: j'ai fait une copie de l'élément de premier plan (id = tiers) en dehors de son parent.

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

Son important de mentionner que dans mon code d'origine les éléments ne sont pas d'ID, donc je ne souffre pas de 2 éléments partageant le même et invalidantes mon code HTML.

Je pense qu'il est prudent de classer cette étrangeté comme un autre bug qui arrive à aider avec l'original, mais cela fonctionne, au moins pour moi. J'espère que quelqu'un trouve cela utile!

Answer 3

Je voulais noter que si vous utilisez IE8 et ci-dessous, il ne supporte pas les filtres CSS3. C'était mon problème.

j'utilisais:

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

Peu importe ce que je mets ma position ou z-index, on ne pouvait pas voir l'autre couche, car il était à l'origine d'un masque complet sur cette couche (au lieu d'aller de passer au noir et effacer à nouveau). En supprimant le filtre CSS3 pour juste IE8, j'ai été capable de résoudre mon problème.

Espérons que cela aide quelqu'un qui rencontre le même problème.

Answer 4

Créez, puis définissez une image d'arrière-plan transparente supplémentaire sur l'élément que vous voulez placer en haut. Pour moi, cela a finalement fonctionné dans 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

On dirait que je plaisante, mais je ne suis pas

.myLinkCssClass { 
    background   : url(#); 
} 

Answer 6

J'ai eu le même problème dans un html où beaucoup divs positionné de rapport répétées bloquaient la vue de div positionné absolu. La solution de contournement fournie par www.brenelz.com, que j'ai déjà utilisé avec succès ne fonctionnait pas dans ce cas. Donc, ce qui suit a fonctionné pour moi: J'ai enlevé le positionnement relatif de ces divs que j'ai mentionné en premier, puis j'ai ajouté un CSS pour activer ces divs lorsque je les ai planés.Permettez-moi de vous montrer le code:

Avant:

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

Après:

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

cette façon de les sœurs »les autres de ce séjour div avec un positionnement normal et ne nuisent pas à la disposition. Ça a très bien marché pour moi! J'espère que ça t'aide aussi.