Comment résoudre les problèmes de Z-Index avec les Divs dans Internet Explorer 6 et 7 ?

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

Problème :

Sur le site Web http://madisonlane.businesscatalyst.com, un problème survient lorsque le div#sign-post ne parvient pas à chevaucher le div#bottom, même s'il doit être affiché au-dessus. De plus, 198 px supplémentaires apparaissent en haut de div#bottom dans IE6.

Comprendre l'index Z et les contextes d'empilement

La propriété z-index détermine la superposition d'éléments en HTML. Cependant, dans IE6 et IE7, le comportement standard diffère légèrement.

Selon la spécification, les éléments avec un attribut de position autre que celui par défaut créent un nouveau « contexte d'empilement ». Les éléments dans le même contexte d'empilement sont comparés en fonction de leurs valeurs d'index z, et l'élément avec la valeur la plus élevée apparaît en haut.

Dans le cas du site Web donné, le problème se pose car IE6 et IE7 créent un empilement contextes pour div#sign-post et div#bottom, même s'ils manquent de valeurs z-index explicites. Par conséquent, l'ordre des documents remplace l'ordre z-index souhaité.

Solution :

Pour résoudre le problème, il est nécessaire de créer un élément parent qui agit comme le "parent empilable" pour div#sign-post et div#bottom. Cet élément doit avoir un attribut de position autre que celui par défaut (par exemple, relatif ou absolu) et une valeur d'index z explicite.

Ce faisant, vous vous assurez que l'ordre de div#sign-post et div#bottom est déterminé dans le même contexte d'empilement et la priorité z-index souhaitée est établie.

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!