Pourquoi mon Z-Index ne fonctionne-t-il pas dans Internet Explorer 7 ?

Problèmes de superposition de l'index Z dans IE7 : un dilemme de contexte d'empilement

Z-index, une propriété CSS, permet la superposition d'éléments HTML sur une page Web. Cependant, Internet Explorer 7 (IE7) présente un comportement inhabituel avec la superposition d'index z.

Dans ce scénario, le développeur a défini un indice z élevé (1 000) sur une liste UL, dans l'intention qu'elle chevauche un div. . Le div restait cependant visible devant l’UL. Le problème réside dans l'interprétation par IE7 des contextes d'empilement.

Les contextes d'empilement sont des couches indépendantes créées dans le processus de rendu du navigateur, où les valeurs de l'index z sont évaluées séparément dans chaque contexte. IE7 interprète les éléments positionnés sans z-index explicite comme créant de nouveaux contextes d'empilement, même si la spécification CSS indique le contraire.

Pour résoudre le problème, ajoutez une valeur z-index explicite à l'élément span positionné :

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

Cela créera un nouveau contexte d'empilement pour la durée et garantira que la liste UL chevauche la div comme prévu.

Alternativement, repenser le document pour éviter d'utiliser position:relative sur les spans, car cela force la création de contextes d'empilement séparés :

<div>
    <label>Input #1:</label> <input>
    <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

En comprenant le concept de contextes d'empilement et leur interprétation dans IE7, les développeurs peuvent contrôler efficacement le superposition d'éléments, même face à des incohérences spécifiques au navigateur.

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!