Bidouilleur

Puisque nous allons nous « payer » IE6 jusqu’en 2014 (date de fin support de micro$oft..), j’ai décidé de faire une série de posts sur les bugs de IE6 en donnant la solution pour chacun d’eux. Celui-ci concerne z-index qui permet de gérer l’empilement (profondeur) des éléments HTML sur une page.

On rencontre ce bug la plupart du temps en créant un menu déroulant,quant le menu se déroule sous le contenu.

Pour le résoudre il suffit d’associer les styles CSS  : position:relative; et  : z-index:1; à la balise parente.

Exemple :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div id="barre">
   <ul id="menu">
	<li><a href="http://">Lien1</a></li>
	<li><a href="http://">Lien2</a></li>
   </ul>
</div>
#barre{
position: relative;
z-index:1;
}
 
#menu
{
z-index:12;
}

Twitter ce post