Pourquoi le comportement du Z-Index diffère-t-il dans Internet Explorer 7 ?-tutoriel CSS-php.cn

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

Mary-Kate Olsen

Libérer： 2024-12-17 18:33:14

original

554 Les gens l'ont consulté

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>

Copier après la connexion

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

Copier après la connexion

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;
}
```
Copier après la connexion

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>

Copier après la connexion

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!