Pourquoi mon menu déroulant est-il caché derrière mon champ de saisie dans IE7 ?

IE7 : Comprendre la confusion de la superposition de l'index Z

IE7 présente des complexités dans l'application du z-index pour la superposition d'éléments. Comprendre le fonctionnement du z-index peut aider à résoudre efficacement les problèmes de superposition.

Z-Index et contextes d'empilement

Contrairement à son nom, le z-index n'est pas une mesure absolue. . Les éléments avec un z-index plus élevé peuvent être masqués derrière des éléments avec un z-index plus faible s'ils appartiennent à des contextes d'empilement différents.

Un contexte d'empilement est créé pour les éléments positionnés (absolu, relatif ou fixe). Cependant, IE7 interprète par erreur les éléments positionnés sans z-index comme créant de nouveaux contextes d'empilement.

Le problème dans votre code

Dans votre exemple, vous avez un span positionné ( <span>) dépourvu d’index z. IE7 interprète cela comme la création d'un nouveau contexte d'empilement, rendant le menu déroulant (

) caché derrière le champ de saisie ().

Solutions possibles

Pour résoudre le problème, envisagez les solutions suivantes :

1. Ajouter un z-index à l'étendue positionnée :

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

Cela définit explicitement le contexte d'empilement et garantit que la liste déroulante chevauche le champ de saisie.

2. Supprimer la position de le Span :

<span>

En supprimant le poste, vous éliminez les inutiles contexte d’empilement. Les éléments suivront désormais l'ordre de superposition par défaut, où la liste déroulante est positionnée au-dessus du champ de saisie.

Considérations supplémentaires

• L'index Z n'affecte que les éléments contenus dans le même contexte d'empilement.
• IE6 a un bug supplémentaire où les boîtes de sélection et les iframes flottent toujours au-dessus de tout else.
• Pour une explication plus détaillée et un exemple de bug similaire, reportez-vous à : https://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z- index-bug/

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!