Maison >interface Web >tutoriel CSS >Pourquoi le comportement du Z-Index diffère-t-il dans Internet Explorer 7 ?

Pourquoi le comportement du Z-Index diffère-t-il dans Internet Explorer 7 ?

Mary-Kate Olsenoriginal: 2024-12-17 18:33:14556parcourir

Why Does Z-Index Behavior Differ in Internet Explorer 7?

Problèmes de superposition de l'index Z dans IE7 : une compréhension complète

Internet Explorer 7 (IE7) a un comportement particulier concernant la propriété z-index , qui est chargé de déterminer l’ordre d’empilement des éléments sur une page Web. Ce comportement peut entraîner des problèmes de superposition inattendus, en particulier lorsque vous travaillez avec plusieurs éléments qui se chevauchent.

Quel est le problème avec Z-Index dans IE7 ?

Dans IE7, le z La propriété -index est relative aux éléments dans le même contexte d'empilement. Cependant, contrairement à la plupart des navigateurs, IE7 crée un nouveau contexte d'empilement pour tout élément positionné sans valeur z-index explicitement définie. Cela signifie qu'un élément avec un z-index inférieur peut chevaucher un élément avec un z-index plus élevé s'il appartient à des contextes d'empilement différents.

Un exemple pratique

Considérons l'exemple de code HTML et CSS suivant :

<form>
  <label>Input #1:</label>
  <span>

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

Dans cet exemple, nous voulions que le menu (le

sans z-index explicite, cela crée un nouveau contexte d'empilement.

Solutions possibles

Pour résoudre ce problème, il existe deux approches principales :

Ajouter un Z-Index explicite au parent Élément :
- Cela force tous les enfants (y compris le menu) de l'élément parent à chevaucher tous les frères et sœurs de l'élément parent. Dans notre exemple, le CSS suivant résoudrait le problème :
```
#envelope-1 {
    position: relative;
    z-index: 1;
}
```

Supprimer la position : relative de l'élément parent :

Si possible, supprimez la propriété position: relative de l'élément parent (le dans notre exemple) pour éviter de créer un nouvel empilement contexte. De cette façon, le menu chevauchera naturellement la deuxième enveloppe. Le code HTML modifié ressemblerait à ceci :

<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>
            <li>item</li>
            <li>item</li>
            <li>item</li>
        </ul>
    </div>

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css html if for Property this position ul issue

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment puis-je placer des icônes dans les éléments de saisie d’un formulaire ?Article suivant：Comment puis-je placer des icônes dans les éléments de saisie d’un formulaire ?

Articles Liés

Voir plus