Syntaxe
|
z-index: number|auto|inherit|initial;
|
Paramètres
| Paramètre |
Description |
| number |
Ce paramètre permet d'indiquer l'ordre dans la pile de l'élément. Les valeurs négatives sont acceptées. |
| auto |
Ce paramètre permet d'indiquer qu'il faut avoir un ordre égale au parent. C'est la valeur par défaut. |
| inherit |
Ce paramètre permet d'indiquer qu'il faut hérité de la valeur de son parent. |
| initial |
Ce paramètre permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. |
Description
Cette propriété permet d'indiquer l'ordre d'empilage d'un élément, soit une façon d'indiquer que élément s'affichera au dessus d'un autre même s'il est indiqué avant l'élément afficher après.
Remarques
- Gestion de la superposition des éléments : La propriété z-index est utilisée pour définir l'ordre de superposition des éléments
HTML. Les éléments avec des valeurs de z-index plus élevées sont affichés devant ceux ayant des valeurs plus faibles.
Par défaut, les éléments suivent l'ordre naturel du flux du document, mais z-index permet de modifier cet ordre pour créer des interfaces interactives.
- Applicable uniquement aux éléments positionnés : Pour que la propriété z-index fonctionne, l'élément doit avoir une position autre que static, comme
relative, absolute, fixed ou sticky. Si un élément n'est pas positionné, la valeur de z-index ne sera pas prise en compte et l'élément restera
dans l'ordre de superposition par défaut.
- Valeurs positives, négatives ou auto : z-index accepte des valeurs entières positives ou négatives. Une valeur négative, comme z-index: -1;, place un élément
derrière ses voisins, tandis qu'une valeur positive le positionne devant. La valeur par défaut auto suit l'ordre naturel des éléments sans modifier leur superposition.
- Contexte d'empilement (stacking context) : Chaque élément avec une propriété de position et un z-index crée un nouveau contexte d'empilement. Les
enfants de cet élément ne peuvent pas dépasser les limites de son contexte d'empilement, ce qui signifie que leur superposition est relative à leur parent immédiat, et non à la
page entière.
- Problèmes de chevauchement et de debugging : Lorsqu'il y a des conflits ou des chevauchements inattendus entre les éléments, ils peuvent souvent être liés à des
contextes d'empilement mal configurés ou des z-index incorrects. Les outils de développement des navigateurs, comme ceux de
Google Chrome ou Firefox, sont utiles pour visualiser
les contextes d'empilement et ajuster les valeurs de z-index.
- Usage pour les modales et menus déroulants : Les valeurs élevées de z-index sont souvent utilisées pour afficher des éléments tels que des modales, des
menus contextuels ou des fenêtres pop-up au-dessus du reste du contenu. Une valeur typique pour une modale peut être très élevée, comme z-index: 1000;, pour éviter
que d'autres éléments ne la recouvrent.
- Impact sur les performances : Bien que l'utilisation de z-index n'ait pas de coût significatif sur les performances, un grand nombre d'éléments avec des
contextes d'empilement complexes peut ralentir le rendu de la page. Cela peut devenir un problème dans des applications graphiques ou des animations nécessitant des couches
multiples.
- Interactions avec les transformations et opacités : Les propriétés CSS comme transform, opacity et filter peuvent également créer de
nouveaux contextes d'empilement. Par exemple, un élément avec opacity: 0.5; ou transform: translateX(10px); créera un contexte indépendant, ce qui peut parfois
interférer avec les attentes de superposition lorsqu'on utilise z-index.
Dernière mise à jour : Dimanche, le 20 décembre 2015
