Exemple de code de la propriété JS / CSS zIndex.
<style>
.cadre-gris{ margin : 5px 0; zoom:1; overflow:hidden; clear:both}
.position {position:relative; height:120px; width:100%}
.position .cadre-vert{position:absolute; width :350px; height:60px}
.f-vert{background:green; width :150px; left: 10px; top : 60px}
.f-jaune{background:yellow; width :150px; left: 20px; top : 40px}
.f-rouge{background:red; left: 100px; top : 10px}
#exemple1 .f-vert {z-index:1}
#exemple1 .f-jaune{z-index:3; width :100px; }
#exemple1 .f-rouge{z-index:2}
</style>
<div class="cadre-exemple cadre-clickme" id="exemple">
<h3 id="exemple-desc">Valeur par défaut</h3>
<div class="cadre-gris position">
<div class="cadre-vert f-jaune">Claque 1</div>
<div id="exemple-style-0" class="cadre-vert f-rouge" >Claque 2</div>
<div class="cadre-vert f-vert">Claque 3</div>
</div>
<div class="cadre-gris position" id="exemple1">
<div class="cadre-vert f-jaune">Claque 1</div>
<div id="exemple-style-1" class="cadre-vert f-rouge" >Claque 2</div>
<div class="cadre-vert f-vert">Claque 3</div>
</div>
</div>
<script>
initExemple('z-index', 'zIndex', ['auto', '1', '2', '3'], 2);
</script>
Interprétation du code de la propriété zIndex JS / CSS par votre navigateur.
Valeur par défaut
Claque 1
Claque 2
Claque 3
Claque 1
Claque 2
Claque 3
Interprétation normale du code de la propriété JS / CSS zIndex (copie d'écran).