z-index
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
La propriété z-index
définit le « z-order » (NdT : « ordre z » n'est pas usité) d'un élément positionné et de ses éléments enfants ou de ses éléments flexibles. Lorsque des éléments se chevauchent, le z-order détermine l'ordre des différentes couches que formeront les éléments. Généralement, un élément couvrira un autre élément si sa valeur de z-index
est supérieure à celle du deuxième élément.
Exemple interactif
Pour les boîtes positionnées (celles pour lesquelles position
est différent de static
), la propriété z-index
définit :
- Le niveau de la boîte dans la pile par rapport au contexte d'empilement courant
- Si la boîte crée un contexte d'empilement local.
Syntaxe
/* Avec un mot-clé */
z-index: auto;
/* valeurs entières */
/* type <integer> */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* Valeurs négatives possibles pour indiquer une priorité inférieure */
/* Valeurs globales */
z-index: inherit;
z-index: initial;
z-index: revert;
z-index: unset;
La propriété z-index
se définit grâce au mot-clé auto
ou grâce à une valeur entière (<integer>
).
Valeurs
auto
-
La boîte ne crée pas de nouveau contexte d'empilement. Le niveau d'empilement de la boîte dans le contexte d'empilement courant est le même que celui de la boîte parente.
<integer>
-
L'entier fourni (type
<integer>
) sera le niveau de la boîte dans la pile d'empilement pour le contexte d'empilement courant. La boîte crée un nouveau contexte d'empilement pour lequel son niveau est0
. Cela signifie que les index z des descendants ne sont pas comparés à ceux des éléments en dehors de l'élément.
Définition formelle
Valeur initiale | auto |
---|---|
Applicabilité | éléments positionnés |
Héritée | non |
Valeur calculée | comme spécifié |
Type d'animation | un entier |
Crée un contexte d'empilement | oui |
Syntaxe formelle
Exemples
Empiler des éléments visuellement
HTML
<div class="wrapper">
<div class="boite-tirets">Boîte avec tirets</div>
<div class="boite-doree">Boîte dorée</div>
<div class="boite-verte">Boîte verte</div>
</div>
CSS
.wrapper {
position: relative;
}
.boite-tirets {
position: relative;
z-index: 1;
border: dashed;
height: 8em;
margin-bottom: 1em;
margin-top: 2em;
}
.boite-doree {
position: absolute;
z-index: 3; /* place .boite-doree au-dessus de .boite-verte et .boite-tirets */
background: gold;
width: 80%;
left: 60px;
top: 3em;
}
.boite-verte {
position: absolute;
z-index: 2; /* place .boite-verte au-dessus de .boite-tirets */
background: lightgreen;
width: 20%;
left: 65%;
top: -25px;
height: 7em;
opacity: 0.9;
}
Résultat
Spécifications
Specification |
---|
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # z-index |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- La propriété CSS
position
- Comprendre le fonctionnement de
z-index