/ Code Css zIndex | Résutat du code Css zIndex | Copie d'écran / J'ai vu une erreur dans cette page

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).

copie d'écran de l'affichage de la propriété JS / CSS zIndex