Propriété CSS z-index
La propriété CSS z-index spécifie l'ordre z d'un élément et de ses descendants ou éléments flex. L'ordre z correspond à l'ordre des éléments sur l'axe z.
Le z-index d'un élément spécifie son ordre à l'intérieur d'un contexte d'empilement. Un contexte d'empilement est un groupe d'éléments ayant un parent commun.
L'élément ayant un ordre d'empilement plus élevé se trouve devant l'élément ayant un ordre d'empilement plus faible. Les éléments ayant un positionnement non statique se trouvent au-dessus des éléments ayant un positionnement statique par défaut.
INFO
La propriété z-index affecte uniquement les éléments positionnés ayant une valeur autre que « static ».
| Valeur initiale | auto |
|---|---|
| S'applique à | Éléments positionnés. |
| Héritée | Non. |
| Animable | Oui. |
| Version | CSS2 |
| Syntaxe DOM | object.style.zIndex = "-1"; |
Syntaxe
Syntaxe de la propriété CSS z-index
z-index: auto | number | initial | inherit;Exemple de la propriété z-index avec une valeur négative :
Exemple de la propriété CSS z-index avec une valeur négative
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
position: absolute;
left: 0;
top: 10px;
z-index: -1;
}
</style>
</head>
<body>
<h2>Z-index property example</h2>
<img src="https://fr.w3docs.com/build/images/w3docs-logo-black.png" alt="W3docs logo" width="200" height="100" />
</body>
</html>Exemple de la propriété z-index avec une valeur positive :
Exemple de la propriété CSS z-index avec une valeur numérique
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#blue,
#green,
#grey {
position: absolute;
width: 150px;
height: 150px;
color: #eee;
opacity: 0.95;
padding: 15px;
line-height: 100px;
text-align: center;
}
#blue {
z-index: 1;
background-color: #1c87c9;
top: 60px;
left: 50px;
line-height: 1;
}
.black {
height: 80px;
width: 160px;
background-color: #000;
line-height: 100px;
bottom: 20px;
position: absolute;
z-index: 10;
}
#green {
z-index: 2;
background-color: #8ebf42;
top: 100px;
left: 170px;
}
#grey {
background-color: #666;
top: 200px;
left: 100px;
}
</style>
</head>
<body>
<h2>Z-index property example</h2>
<div class="container">
<div id="blue">
Blue
<div class="black">Black</div>
</div>
<div id="green">Green</div>
<div id="grey">Grey</div>
</div>
</body>
</html>Résultat
Valeurs
| Valeur | Description | Jouer » |
|---|---|---|
| auto | Le niveau d'empilement de la boîte générée est égal à celui de ses parents. Il s'agit de la valeur par défaut de cette propriété. | Jouer » |
| number | Le niveau d'empilement de la boîte générée est spécifié par des nombres. Les valeurs négatives sont valides. | Jouer » |
| initial | Fait utiliser à la propriété sa valeur par défaut. | Jouer » |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Que fait la propriété 'z-index' en CSS ?