Propriété z-index en CSS

La propriété css z-index permet de spécifier la position d'empilement ou de superposition d'un bloc par rapport à d'autres blocs. Cette propriété est généralement utilisée pour la création de calques (Layer). En gros, cette propriété permet d'afficher des blocs les uns au dessus des autres sous conditions d'être positionné (position : absolute, relative ou fixed). Les valeurs utilisées dans la propriété z-index sont importantes car elles permettent de savoir ou sont positionnés les blocs par apport aux autres. Ainsi un bloc utilisant un z-index:1; sera positionné en dessous d'un bloc utilisant un z-index:2; et ainsi de suite. La valeur la plus faible étant toujours en dessous et inversement.
Pour bien comprendre la chose, nous allons partir d'une base de 2 carrés créés en CSS et disposés toujours dans le même ordre.

Ci-dessous, 2 carrés tout simple sans aucun positionnement. Le carré noir est positionné en premier.
1
2
#a {
color:white;
background-color:black;
width:200px;
height:200px;
left: 100px;
}
#b {
color:white;
background-color:red;
width:200px;
height:200px;
left: 120px;
}
<div id="a">1</div>
<div id="b">2</div>
Nous appliquons maintenant à nos 2 carrés une position absolute. Comme nos 2 carrés sont en position:absolute;, le carré rouge passe alors au premier plan.
1
2
#a {
position:absolute;
color:white;
background-color:black;
width:200px;
height:200px;
left: 100px;
}
#b {
position:absolute;
color:white;
background-color:red;
width:200px;
height:200px;
left: 120px;
}
Nous appliquons maintenant la propriété z-index à nos 2 carrés . z-index:1; au carré noir et z-index:2; au carré rouge.
Comme vous le constatez, on ne distingue aucune changement avec le résultat obtenu au-dessus car la valeur de la propriété z-index du carré noir est plus petite que celle du carré rouge. La valeur la plus forte étant toujours au-dessus.
1
2 » z-index:2;
#a {
position:absolute;
color:white;
background-color:black;
width:200px;
height:200px;
left: 100px;
z-index:1;
}
#b {
position:absolute;
color:white;
background-color:red;
width:200px;
height:200px;
left: 120px;
z-index:2;
}
Nous interchangeons maintenant les valeurs de la propriété z-index pour attribuer le chiffre 1 au carré rouge et le chiffre 2 au carré noir.
1 » z-index:2;
2
#a {
position:absolute;
color:white;
background-color:black;
width:200px;
height:200px;
left: 100px;
z-index:2;
}
#b {
position:absolute;
color:white;
background-color:red;
width:200px;
height:200px;
left: 120px;
z-index:1;
}
Comme vous le constatez, l'ordre "des calques" ou d'empilement a été modifié pour laissé apparaitre en premier plan le carré noir.

Ci-dessous, un autre exemple de la propriété z-index avec l'utilisation d'une classe "hover" sur les blocs (ne fonctionne pas sous Internet Explorer). L'astuce, c'est d'afficher au premier plan le bloc survolé toujours grace à la propriété z-index.
z-index: 1; | hover » z-index: 6;
z-index: 2; | hover » z-index: 7;
z-index: 3; | hover » z-index: 8;
z-index: 4; | hover » z-index: 9;
z-index: 5; | hover » z-index: 10;
#a {
color:white;
position: absolute;
background-color:black;
width:200px;
height:200px;
left: 100px;
z-index: 1;
}
#a:hover {
color:white;
position: absolute;
background-color:black;
width:200px;
height:200px;
left: 100px;
z-index: 6;
}
#b {
color:white;
position: absolute;
background-color:red;
width:200px;
height:200px;
left: 120px;
z-index: 2;
}
#b:hover{
z-index: 7;
}
#c {
color:white;
position: absolute;
background-color:green;
width:200px;
height:200px;
left: 140px;
z-index: 3;
}
#c:hover{
z-index: 8;
}
#d {
color:white;
position: absolute;
background-color:yellow;
width:200px;
height:200px;
left: 160px;
z-index: 4;
}
#d:hover{
z-index: 9;
}
#e {
color:white;
position: absolute;
background-color:blue;
width:200px;
height:200px;
left: 180px;
z-index: 5;
}
#e:hover{
background-color:brown;
z-index: 10;
}
<div id="a">z-index: 1; | hover &raquo; z-index: 6;</div>
<div id="b">z-index: 2; | hover &raquo; z-index: 7;</div>
<div id="c">z-index: 3; | hover &raquo; z-index: 8;</div>
<div id="d">z-index: 4; | hover &raquo; z-index: 9;</div>
<div id="e">z-index: 5; | hover &raquo; z-index: 10;</div>
Un effet sur du texte
Je superpose 2 titres avec z-index Je superpose 2 titres avec z-index

#titre{
position: absolute;
color:black;
left: 10px;
z-index: 1;
font-size:25px;
}
#titre1{
opacity: 0.5;
position: absolute;
color:blue;
left: 13px;
z-index: 2;
font-size:25px;
}
<span id="titre">Je superpose 2 titres avec z-index</span>
<span id="titre1">Je superpose 2 titres avec z-index</span
Voir/déposer un commentaire (0) | Signaler un problème