Disposition CSS - La propriété z-index
La z-indexpropriété spécifie l'ordre de pile d'un élément.
La propriété z-index
Lorsque des éléments sont positionnés, ils peuvent chevaucher d'autres éléments.
La z-indexpropriété spécifie l'ordre de pile d'un élément (quel élément doit être placé devant ou derrière les autres).
Un élément peut avoir un ordre de pile positif ou négatif :
Ceci est une rubrique
Comme l'image a un z-index de -1, elle sera placée derrière le texte.
Exemple
img
{
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Remarque : z-index ne fonctionne que sur les éléments positionnés (position : absolue, position : relative, position : fixe ou position : collante) et les éléments flexibles
(éléments qui sont des enfants directs de l'affichage : éléments flexibles).
Un autre exemple d'index z
Exemple
Ici, nous voyons qu'un élément avec un ordre de pile supérieur est toujours au-dessus d'un élément avec un ordre de pile inférieur :
<html>
<head>
<style>
.container {
position: relative;
}
.black-box {
position: relative;
z-index: 1;
border: 2px solid black;
height: 100px;
margin: 30px;
}
.gray-box {
position: absolute;
z-index: 3;
background: lightgray;
height: 60px;
width: 70%;
left: 50px;
top: 50px;
}
.green-box {
position: absolute;
z-index: 2;
background: lightgreen;
width: 35%;
left: 270px;
top: -15px;
height:
100px;
}
</style>
</head>
<body>
<div class="container">
<div
class="black-box">Black box</div>
<div class="gray-box">Gray
box</div>
<div class="green-box">Green box</div>
</div>
</body>
</html>
Sans index z
Si deux éléments positionnés se chevauchent sans z-index
spécification, l'élément défini en dernier dans le code HTML sera affiché en haut.
Exemple
Même exemple que ci-dessus, mais ici sans z-index spécifié :
<html>
<head>
<style>
.container {
position: relative;
}
.black-box {
position: relative;
border: 2px solid black;
height: 100px;
margin: 30px;
}
.gray-box {
position: absolute;
background: lightgray;
height: 60px;
width: 70%;
left: 50px;
top: 50px;
}
.green-box {
position: absolute;
background: lightgreen;
width: 35%;
left: 270px;
top: -15px;
height:
100px;
}
</style>
</head>
<body>
<div class="container">
<div
class="black-box">Black box</div>
<div class="gray-box">Gray
box</div>
<div class="green-box">Green box</div>
</div>
</body>
</html>
Propriété CSS
| Property | Description |
|---|---|
| z-index | Sets the stack order of an element |