La propriété z-index? qu'est-ce que c'est?
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:
- 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) - 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
Voici un exemple:
.test1,.test2,.test3,.test4 { height:100px; width:100px; opacity:0.8; }
.test1 { position:absolute; top:60px; left:70px; z-index:4; background-color:green; }
.test2 { position:absolute; top:30px; left:16px; z-index:2; background-color:red; }
.test3 { z-index:10; background-color:blue; }
.test4 { position:relative; top:auto; left:20px; z-index:8; background-color:#C3C; }
<div class="test1">...</div> <div class="test2">...</div> <div class="test3">...</div> <div class="test4">...</div>
Vous pouvez voir le résultat ci-dessous:
test1
test2
test3
test4
Explication:
test1 sera au premier plan z-index:4;
en dessous on aura test2 avec z-index:2;
en dessous encore on aura test3 (qui ne se place pas au-dessus malgré un z-index:10; car il n'est pas positionné)
enfin, test4 sera le plus haut de la pile z-index:8;, il recouvre les autres blocs ici, avec sa position top:auto; et left:20px;, mais il est, en fait, repoussé vers le bas par test3 qui n'est pas positionné.
Au final, comme tous les blocs ont une couleur de fond opaque, il est possible d'apercevoir les différentes boites.
Simple, non?