[HTML/CSS] Mettre un div au dessus d'un select avec IE6

selectZindex01

Lors de l'intégration d'une page Web pour un projet en cours de réalisation, j'ai été confronté à un problème de superposition d'un div par dessus un menu déroulant (balise <select>) dans Internet Explorer 6.

En effectuant quelques recherches sur Internet, j'ai constaté que ce bug était connu de Microsoft et expliqué dans ce document : Gestion des plans d'affichage sous Internet Explorer. On y apprend entre autre, que la balise <select> est un élément dit 'Windowed', c'est à dire qu'elle se superpose toujours aux éléments dits 'Windowless' dont la balise <div> fait partie (comme la plupart des balises HTML), et ce, quel que soit le z-index attribué à l'élément div. Ainsi, même en définissant un z-index à mon div, supérieur à celui appliqué au formulaire contenant le menu déroulant, le problème persistait.

Dans ce même document, on apprend également que la balise <iframe> est une des seules balises à tenir compte du z-index des éléments Windowed. Ainsi, en insérant une iframe dans le div devant figurer au dessus du menu déroulant, le problème serait résolu.

selectZindex02

L'iframe n'étant présente que pour corriger un bug d'affichage, il s'agit désormais de la rendre invisible. Ci-dessous le style CSS (simplifié) permettant d'y parvenir :

form{
z-index: 100;
}

div{
position: relative;
z-index: 200;
}

div iframe{
display:block;
position:absolute;
top:0;
left:0;
z-index:-1;/*Placer l'iframe en arrière-plan du div*/
filter:mask();/*Cacher l'iframe dans IE6*/
}

Enfin, ce problème n'existant que sous Internet Explorer version 6 et antérieures, vous pourriez choisir de n'insérer l'iframe que si l'internaute utilise ce type de navigateur. Pas besoin pour cela d'une fonction javaScript pour connaître le navigateur utilisé, les commentaires conditionnels conviendront parfaitement :

<div>
<!--[if lte IE 6.5]><iframe></iframe><![endif]-->
</div>

Ici, l'iframe ne sera insérée dans le div que sur Internet Explorer version 6.5 et antérieures.

Commentaires

  • shub
    • 1. shub Le Lun 13 Juin 2011
    On pourrait avoir l'exemple complet du code parce que là j'ai un peu de mal...
    merci beaucoup
  • Ham's
    • 2. Ham's Le Ven 12 Mars 2010
    Merci, mais alors vraiment merci pour avoir publié cette petite astuce qui fonctionne à merveille !
    Je l'ai par ailleurs trouvé dans un script d'autocompletion mais je ne comprennais pas à quoi cela servais de rajouter une iframe ! J'ai maintenant compris !

    Merci aussi à IE6 pour ces bugs et ses subtilités de fonctionnement qui nous oblige à bricoler pour que nos applications soient compatibles partout !!!
  • antonin
    • 3. antonin Le Mer 28 Oct 2009
    merci Philippe pour l'astuce, faisant apparaître le div en JS, un traitement JS est plus adapté pour mon cas...
    mais la première idée peut avoir ces adeptes :) donc également merci à Pascal pour le temps passé.

    ma contrib pour les utilisateur de prototype

    /*
    * vis peut avoir visible ou hidden, vide il sera a visible
    */
    function visibleSelect(vis){

    var etat = vis || 'visible';

    var nodes = $$('select');
    nodes.each(function(item){
    item.style.visibility=etat;
    });
    }


    utilisation

    visibleSelect('hidden');
    et
    visibleSelect(); ou visibleSelect('visible');
  • Philippe

    Bonjour et merci pour cette astuce. Hélas elle ne fonctionne pas trop chez moi. J'ai donc utilisé une autre astuce qui consiste à mettre un style="visibility: visible;" sur le select et ensuite sur le div qui doit apparaitre par dessus le select on utilise un peu de javascript pour cacher le select lorsque le div apparait (document.getElementById('ID_du_select').style.visibility='hidden';) sans oublier de le réafficher ensuite ;) Tout simplement !

Ajouter un commentaire