Pourquoi mon ordre d'empilement de divisions se comporte-t-il différemment dans IE6 et 7 ?

Problème d'index Z avec Internet Explorer 6 et 7

Problème :
Dans une page Web avec deux divs, div#sign-post doit apparaître au-dessus de div#bottom, mais cela ne se produit que dans les navigateurs autres qu'Internet Explorer (IE) 6 et 7. De plus, IE6 affiche 198 pixels supplémentaires en haut de div#bottom.

Solution :

Comprendre l'index Z dans IE6/7

Dans la plupart des navigateurs, la propriété z-index permet aux éléments d'être empilés au-dessus ou en dessous des autres en fonction de leurs valeurs assignées. Cependant, dans IE6 et 7, les éléments positionnés créent de nouveaux contextes d'empilement quelles que soient les valeurs de l'index z.

Le problème

Dans ce cas, div#sign-post a un z-index plus élevé que div#bottom, mais IE6/7 compare les contextes d'empilement de leurs parents, qui dans IE sont créés par les éléments positionnés eux-mêmes. Étant donné que ni div#sign-post ni div#bottom n'ont explicitement défini de valeurs d'index z, l'ordre des documents détermine leur empilement, ce qui fait apparaître div#bottom en haut.

Solution de contournement :

Pour résoudre ce problème, il est nécessaire d'attribuer des valeurs de z-index aux ancêtres positionnés des personnes concernées éléments.

1. Identifiez les ancêtres positionnés qui créent les contextes d'empilement.
2. Utilisez JavaScript ou CSS pour attribuer un z-index élevé à ces ancêtres, forçant l'ordre d'empilement souhaité.

Par exemple, si div#parent contient div#sign-post, attribuez un z-index de 1000 à div#parent pour le placer au-dessus de div#bottom.

Problème supplémentaire d'IE6

Les 198 pixels supplémentaires en haut de div#bottom dans IE6 sont dus à un calcul interne de son marge par défaut. Ce problème peut être résolu en définissant explicitement la marge de div#bottom sur 0px.

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!