Internet Explorer 7 possède un bug bien particulier qui lui est propre au niveau des z-index. En tous les cas je ne l’ai pas retrouvé ni sur IE6 (pour une fois) ni sur IE8.

Ce bug m’est apparu lorsque j’ai créé un menu déroulant en CSS / jQuery impliquant des listes positionnées en relative et absolute et que dans le contenu situé sous le menu j’ai un ou plusieurs éléments positionnés également en relative ou absolute. Dans ce cas j’avais le menu déroulant qui passait sous les éléments du contenu. Problème de z-index semble-t-il. Pourtant malgré le fait de bien paramétrer des z-index sur les éléments du menu et les éléments du contenu, rien à faire, le menu déroulant reste derrière. Grossièrement, le code a cette structure:

<div id="header">
    <div id="div_menu">
        <ul id="menu">
            <li><a href="#">Lien 1</a>
                <ul class="sousmenu">
                    <li><a href="#">Sous-menu</a></li>
                    <li><a href="#">Sous-menu</a></li>
                    <li><a href="#">Sous-menu</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<div id="contenu">
    <div id="element_en_absolu">Le sous menu passe derrière !</div>
</div>

Tous mes z-index avaient été placés sur les éléments #div_menu, #menu, #menu li etc.. ainsi que sur #element_en_absolu.

Finalement j’ai trouvé la solution sur ce blog. J’ai résolu le problème en définissant un z-index le plus élevé sur #header. Ce qui veut dire qu’il faut donc définir un z-index qui soit le plus élevé que tous les autre sur le ou les parents du menu.