La propriété z-index permet de préciser l'empilement de certains éléments d'une page, c'est-à-dire sur l'axe vertical. Elle permet par exemple d'indiquer que pour deux éléments A et B partiellement ou totalement superposés, A sera placé au dessus de B ou inversement.

Mais l'utilisation de cette propriété comporte quelques pièges. Il y a deux informations principales à retenir :

1. Seuls les éléments positionnés peuvent avoir un z-index. Un élément positionné est un élément dont la propriété CSS position a pour valeur relative, absolute ou fixed. Par défaut, les éléments d'une page ne sont pas positionnés (ils sont en position:static).

2. Les valeurs les plus élevées sont au premier plan, et les plus faibles sont au second plan. Un z-index de 2 sera placé au dessus d'un z-index de 1, et un z-index de -1 sera placé au dessus d'un z-index de -2.

Un exemple

Soit le code HTML suivant:

<div id="test1">...</div>
<div id="test2">...</div>
<div id="test3">...</div>
<div id="test4">...</div>

et le code CSS suivant:

div {height: 100px; width: 100px;}
div#test1 {position: absolute; z-index: 4;}
div#test2 {position: absolute; z-index: 2;}
div#test3 {z-index: 10;}
div#test4 {position: relative; z-index: 8;}

Le résultat attendu est le suivant:

• div#test1 sera au premier plan;
• en dessous on aura div#test2;
• en dessous encore on aura div#test3 (qui ne se place pas au-dessus malgré un z-index de 10 car il n'est pas positionné);
• enfin, div#test4 sera le plus haut de la pile, mais ne recouvre pas les autres blocs ici car il est repoussé vers le bas par div#test3 qui n'est pas positionné.

Au final, si tous les blocs ont une couleur de fond opaque, on ne pourra apercevoir que div#test1 en haut et div#test4 plus bas. Les autres blocs sont recouverts par div#test1.