Problèmes de couches d'index Z IE7

163

J'ai isolé un petit cas de test du z-indexbogue d'IE7 , mais je ne sais pas comment le résoudre. J'ai joué avec z-indextoute la journée.

Quel est le problème avec z-indexIE7?

Tester CSS:

input {
    border: 1px solid #000;
}

div {
    border: 1px solid #00f;
}

ul {
    border: 1px solid #f00;
    background-color: #f00;
    list-style-type: none;
    margin: 0;
    padding-left: 0;
    z-index: 1000;
}

li {
    color: #fff;
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}

span.envelope {
    position: relative;
}

span.envelope ul {
    position: absolute;
    top: 20px;
    left: 0;
    width: 150px;
}

Test HTML:

<form>
  <label>Input #1:</label>
  <span id="envelope-1" class="envelope">
    <input name="my-input-1" id="my-input-1" />
      <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
      </ul>
  </span>
  <br><br>
  <label>Input #2:</label>
  <span id="envelope-2" class="envelope">
    <input name="my-input-2" id="my-input-2" />
  </span>
</form>
css internet-explorer-7 z-index rezna
la source
Si vous cherchez un moyen de contourner le problème
Nasaralla

Réponses:

268

L'indice Z n'est pas une mesure absolue. Il est possible qu'un élément avec z-index: 1000 soit derrière un élément avec z-index: 1 - tant que les éléments respectifs appartiennent à des contextes d'empilement différents .

Lorsque vous spécifiez z-index, vous le spécifiez par rapport à d'autres éléments dans le même contexte d'empilement, et bien que le paragraphe de la spécification CSS sur Z-index indique qu'un nouveau contexte d'empilement n'est créé que pour le contenu positionné avec un z-index autre que automatique ( ce qui signifie l' ensemble du document devrait être un seul contexte d'empilement), vous avez fait construire une travée positionné: malheureusement IE7 interprète contenu positionné sans z-index cela comme un nouveau contexte d'empilement.

En bref, essayez d'ajouter ce CSS:

#envelope-1 {position:relative; z-index:1;}

ou reconcevoir le document pour que vos travées n'aient plus position: relative:

<html>
<head>
    <title>Z-Index IE7 Test</title>
    <style type="text/css">
        ul {
            background-color: #f00; 
            z-index: 1000;
            position: absolute;
            width: 150px;
        }
    </style>
</head>
<body>
    <div>
        <label>Input #1:</label> <input><br>
        <ul><li>item<li>item<li>item<li>item</ul>
    </div>

    <div>
        <label>Input #2:</label> <input>
    </div>
</body>
</html>

Voir http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/ pour un exemple similaire de ce bogue. La raison pour laquelle donner à un élément parent (enveloppe-1 dans votre exemple) un z-index plus élevé fonctionne est que tous les enfants d'enveloppe-1 (y compris le menu) chevaucheront tous les frères d'enveloppe-1 (en particulier, enveloppe-2).

Bien que z-index vous permette de définir explicitement comment les choses se chevauchent, même sans z-index, l'ordre de superposition est bien défini . Enfin, IE6 a un bogue supplémentaire qui fait flotter les boîtes de sélection et les iframes au-dessus de tout le reste.

Eamon Nerbonne
la source
4
enfin résolu :) - la position relative est vraiment agaçante, donc j'ai en quelque sorte adopté votre idée sans les éléments `` enveloppe '' - cela semble résoudre le problème et aussi fonctionner - il suffit de reconcevoir un peu le code de la boîte de suggestion - merci un lot
rezna
6
Il y a trois choses différentes qui influencent la façon dont les éléments se chevauchent: les contextes d'empilement, l'ordre source et l'ordre de peinture. Les problèmes les plus évidents se posent lors du traitement des contextes d'empilement - connaître les deux autres vous aidera à comprendre les pièges les plus ésotériques. Source: CSS-Discuss Wiki.
rjb
2
ajouter le z-index à l'élément parent est une solution merveilleuse
Danyun Liu
2
Je t'aime. Ajout de la position: relative et z-index: 500 à mon parent et ça l'a corrigé!
Aymeric Gaurat-Apelli
2
J'ai fait un violon de ce problème avec des commentaires qui démontrent la solution. jsfiddle.net/fNcGu/3
Christopher Johnson
15

http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

$(function() {
var zIndexNumber = 1000;
$('div').each(function() {
    $(this).css('zIndex', zIndexNumber);
    zIndexNumber -= 10;
});
});
nixis
la source
après avoir lu la solution «correcte» ci-dessus, j'ai essayé de formuler une solution pour mon problème considérablement plus complexe que le problème trivial de la question. puis j'ai jeté cette réponse et cela a fonctionné comme un charme. si la solution ci-dessus est la bonne, c'est certainement la solution la plus simple. Merci!
Landon
11

Dans IE, les éléments positionnés génèrent un nouveau contexte d'empilement, commençant par une valeur z-index de 0. Par conséquent, z-index ne fonctionne pas correctement.

Essayez de donner à l'élément parent une valeur d'index z plus élevée (peut être encore plus élevée que la valeur d'index z de l'enfant elle-même) pour corriger le bogue.

ed1nh0
la source
1
Merci. Cette solution a fonctionné pour moi en donnant un z-index du conteneur parent, pas nécessairement plus élevé que le z-index de l'enfant.
neelmeg
4

J'ai rencontré ce problème, mais sur un grand projet où des modifications HTML ont dû être demandées et sont devenues un problème complet, alors je cherchais une solution pure css.

En plaçant position:relative; z-index:-1sur le contenu de mon corps principal, mon contenu déroulant d'en-tête s'affiche soudainement au-dessus du contenu du corps dans ie7 (il s'affichait déjà sans problème dans tous les autres navigateurs et dans ie8 +)

Le problème avec cela était alors cette désactivation de toutes les actions de survol et de clic sur tout le contenu de l'élément avec le z-index:-1donc je suis allé à l'élément parent de la page entière et lui ai donné unposition:relative; z-index:1

Ce qui a résolu le problème et conservé la fonctionnalité de superposition correcte.

Se sent un peu hacky, mais a fonctionné au besoin.

lukeroxout
la source
3

J'ai trouvé que je devais placer une désignation spéciale z-index sur div dans une feuille de style spécifique à ie7:

div {z-index: 10; }

Pour que l'index z des div non liés, comme un nav, s'affiche au-dessus du curseur. Je ne pouvais pas simplement ajouter un z-index au div de curseur lui-même.

Solutions eBar
la source
J'ai trouvé que cela permettait en plus au html {z-index:1; position:relative;}menu de parcourir l'image du carrousel sur IE.
bassplayer7
2

Si l'indexation z plus élevée mentionnée précédemment dans les nœuds parents ne répond pas à vos besoins, vous pouvez créer une solution alternative et la cibler sur les navigateurs problématiques soit par des commentaires conditionnels IE, soit en utilisant la détection de fonctionnalité (plus idéaliste) fournie par Modernizr.

Test rapide (et évidemment fonctionnel) pour Modernizr:

Modernizr.addTest('compliantzindex', function(){
    var test  = document.createElement('div'),
        fake = false,
        root = document.body || (function () {
            fake = true;
            return document.documentElement.appendChild(document.createElement('body'));
        }());

    root.appendChild(test);
    test.style.position = 'relative';
    var ret = (test.style.zIndex !== 0);
    root.removeChild(test);

    if (fake) {
        document.documentElement.removeChild(root);
    }

    return ret;
});
sphéroïde
la source
Très agréable! La détection des fonctionnalités est définitivement la voie à suivre.
Jason
1

Cela ne ressemble pas à un bug ie, juste pour une compréhension différente du standard css. Si le conteneur extérieur n'est pas spécifié, le z-index, mais l'élément interne a spécifié un z-index plus élevé. Ainsi, le frère du conteneur peut superposer l'élément z-index élevé. Même si comme ça, cela ne se produit que dans IE7, mais IE6, IE8 et Firefox sont ok.

c2j
la source
0

Dans IE6 en général, certains éléments de l'interface utilisateur sont implémentés avec des contrôles natifs. Ces contrôles sont rendus dans une phase complètement séparée (fenêtre?) Et apparaissent toujours au-dessus de tous les autres contrôles, quel que soit le z-index. Les boîtes de sélection sont un autre contrôle problématique.

La seule façon de contourner ce problème est de créer du contenu que IE rend comme une "fenêtre" séparée - c'est-à-dire que vous pouvez placer une zone de sélection sur une zone de texte ou, plus utilement, une iframe.

En bref, vous devrez mettre "en survol" comme des éléments tels que les menus dans une iframe afin de permettre à IE de placer ces contrôles d'interface utilisateur intégrés ci-dessus.

Cela aurait dû être corrigé dans IE7 (voir http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx ) mais peut-être que vous utilisez une sorte de mode de compatibilité?

Eamon Nerbonne
la source
Je connais le bogue z-index d'IE6 - et cela est corrigé - mais il y a un autre problème avec les éléments / entrées de position relativement / absolus dans IE7 (qui est corrigé dans IE8) - j'ai trouvé quelques solutions (jouer avec z-indeces), mais aucun d'entre eux n'a fonctionné pour - c'est pourquoi je demande là-bas ... Quoi qu'il en soit, merci pour la réponse.
rezna
0

Ce bogue semble être un peu un problème distinct du bogue standard d'IE de contexte d'empilement séparé. J'ai eu un problème similaire avec plusieurs entrées empilées (essentiellement une table avec un autocompléter dans chaque ligne). La seule solution que j'ai trouvée était de donner à chaque cellule une valeur d'index z décroissante.

Jeremy Kauffman
la source
0

Si vous voulez créer un menu déroulant et que vous rencontrez un problème avec z-index, vous pouvez le résoudre en créant des z-index de même valeur (z-index: 999; par exemple) .. Il suffit de mettre z-index dans les div parent et enfant et cela résoudra le problème. Je résous le problème avec ça. Si je mets différents z-index, bien sûr, cela montrera mon div enfant sur mon div parent, mais, une fois que je veux déplacer ma souris de l'onglet de menu vers le sous-menu div (liste déroulante), il disparaît ... alors Je mets des z-index de même valeur et résout le problème.

Marko
la source
0

Je l'ai résolu en utilisant les outils de développement pour IE7 (c'est une barre d'outils) et en ajoutant un z-index négatif au conteneur du div qui sera en dessous de l'autre div.

Lucas
la source