web-dev-qa-db-fra.com

Problèmes de superposition d'index Z IE7

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

Quel est le problème avec z-index dans IE7?

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>
cssinternet-explorer-7z-index
163
rezna

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 à différents contextes d'empilement .

Lorsque vous spécifiez z-index, vous le spécifiez par rapport à d'autres éléments dans le même contexte de superposition, et bien que le paragraphe de la spécification CSS sur Z-index indique qu'un nouveau contexte de superposition est créé uniquement pour le contenu positionné avec un index z différent de auto (ce qui signifie que tout votre document doit être un seul contexte d'empilement), vous avez construit un emplacement span: Malheureusement, IE7 interprète le contenu positionné sans z-index comme un nouveau contexte d'empilement.

En bref, essayez d'ajouter ce CSS:

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

ou reconcevoir le document de sorte que vos étendues n'ont plus de 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 qui attribue à un élément parent (l'enveloppe-1 dans votre exemple) un indice z supérieur fonctionne, car tous les enfants de l'enveloppe-1 (y compris le menu) chevauchent tous les frères et soeurs de l'enveloppe-1 (plus précisément l'enveloppe-2).

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

267
Eamon Nerbonne

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;
});
});
15
nixis

Dans IE, les éléments positionnés génèrent un nouveau contexte de pile, commençant par une valeur z-index égale à 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 même être supérieure à la valeur d’index z de l’enfant lui-même) pour corriger le bogue.

11
ed1nh0

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 entier, donc je cherchais une solution de css pure.

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

Le problème était que cela désactivait toutes les actions de survol et de clic sur tout le contenu de l'élément avec le z-index:-1. Je suis donc allé à l'élément parent de la page entière et lui ai donné un position:relative; z-index:1

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

Se sent un peu hacky, mais a travaillé comme requis.

4
lukeroxout

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

div {z-index: 10; }

Pour que l'index z des divs sans lien, tel qu'un nav, soit affiché au-dessus du curseur. Je ne pouvais pas simplement ajouter un index z au curseur div lui-même.

3
eBar Solutions

Si l'index z supérieur mentionné précédemment dans les nœuds parents ne vous convient pas, vous pouvez créer une solution alternative et la cibler sur les navigateurs problématiques soit par IE commentaires conditionnels, soit en utilisant la détection de fonctionnalités (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;
});
2
spheroid

Cela ne ressemble pas à un bogue, mais pour une compréhension différente de la norme CSS. Si le conteneur extérieur n'est pas spécifié, l'index z, mais l'élément interne a spécifié un index z supérieur. Le frère du conteneur peut donc superposer l'élément z-index élevé. Même si comme cela, cela ne se produit que dans IE7, mais IE6, IE8 et Firefox est ok.

1
c2j

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

0
Lucas

Si vous voulez créer un menu déroulant et que vous avez 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 parent et child div's 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, il montrera mon div enfant par-dessus mon div parent, mais, une fois que je veux déplacer ma souris de l'onglet du menu vers le sous-menu div (liste déroulante), elle disparaîtra ... je mets z-index de même valeur et résous le problème ..

0
Marko

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 des autres contrôles, quel que soit l'indice z. Les zones de sélection constituent un autre contrôle problématique.

Le seul moyen de contourner ce problème est de créer un contenu que IE restitue sous forme de "fenêtre" distincte - c’est-à-dire que vous pouvez placer une zone de sélection sur une zone de texte ou, plus utilement, un iframe.

En bref, vous aurez besoin de "survoler" les éléments tels que les menus dans une iframe pour permettre à IE de placer ces commandes d'interface utilisateur ci-dessus.

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

0
Eamon Nerbonne

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

0
Jeremy Kauffman