web-dev-qa-db-fra.com

Bogue z-index d'Internet Explorer?

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

cssinternet-explorerhtmlz-index
20
Paul

On dirait que je plaisante, mais je ne le suis pas

.myLinkCssClass {
    background          : url(#);
}
17
MagicSux

Vous n'êtes pas par hasard en train de mettre quelque chose sur une zone de liste déroulante (balise de sélection), un iframe ou un film flash, non?

Dans ces cas, le z-index est une cause perdue.

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

2
Zyphrax

J'ai eu une vraie douleur avec ce problème pour lequel cette solution de contournement particulière n'était pas pertinente. C'est un peu difficile à expliquer donc je vais essayer d'utiliser du 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 définir le z-index du parent sur une valeur plus élevée le déplacerait au premier plan au lieu de l'arrière où il est censé être. Je suis tombé sur une solution complètement par accident: j'ai fait une copie de l'élément de premier plan (id = troisième) 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>

Il vaut la peine de mentionner que dans mon code d'origine, les éléments n'ont pas d'ID, donc je ne souffre pas que 2 éléments partagent le même et invalident mon HTML.

Je pense qu'il est sûr de classer cette bizarrerie comme un autre bug qui aide à l'original, mais cela fonctionne, au moins pour moi. J'espère que quelqu'un trouvera cela utile!

1
Omri

Créez puis définissez une image d'arrière-plan transparente supplémentaire sur l'élément que vous souhaitez avoir au-dessus. Pour moi, cela a finalement fonctionné dans IE8. TOUPET:

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

J'ai eu le même problème dans un html où de nombreux divs positionnés relatifs répétés bloquaient la vue des div positionnés absolus. La solution de contournement fournie par www.brenelz.com, que j'ai déjà utilisée avec succès, ne fonctionnait pas dans ce cas. Donc, ce qui suit a fonctionné pour moi: j'ai supprimé le positionnement relatif de ces divs que j'ai mentionnés en premier, puis j'ai ajouté un CSS pour activer ces divs relatifs en survol. 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;
}

De cette façon, les autres "sœurs" de cette div restent avec un positionnement normal et n'interfèrent pas avec la disposition. Cela a très bien fonctionné pour moi! J'espère que ça vous aide aussi.

0
Pedro Alvares

Je voulais noter que si vous utilisez IE8 et inférieur, il ne prend pas en charge les filtres CSS3. C'était mon problème.

J'utilisais:

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

Peu importe la position que j'ai définie ou mon index z, vous ne pouviez pas voir l'autre calque car il provoquait un masque complet sur ce calque (au lieu de passer du clair au noir et de le nettoyer à nouveau).

En supprimant le filtre CSS3 pour IE8 uniquement, j'ai pu résoudre mon problème.

J'espère que cela aide quelqu'un qui rencontre le même problème.

0
Termato