FAQ version Beta 0.5
Positionnement, alignement, centrage
Comment fonctionne la propriété CSS z-index?
La propriété "z-index" permet de préciser l'empilement de certains éléments d'une page. 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 POUR LA ROUTE
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.
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 POUR LA ROUTE
Soit le code HTML suivant:
<div id="test1">…</div>
<div id="test2">…</div>
<div id="test3">…</div>
<div id="test4">…</div>
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;}
- 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.
Liens complémentaires