Ajouter z-index

Ajouter z-index

Dans le premier exemple, « empilement sans z-index »,  illustre comment l'empilement fonctionne par défaut. Pour définir un ordre d'empilement différent, il faut utiliser la propriété CSS z-index.

Cette propriété, dont l'attribut est une valeur entière (positive ou négative), représente la position de l'élément le long de l'axe Z. Pour se représenter cette notion, on peut imaginer que la page possède plusieurs couches, les unes au dessus des autres. Chaque couche est numérotée. Un couche avec une grande valeur de z-index est affichée par dessus toutes celles dont la valeur est inférieure à la sienne.

• Bas : couche la plus lointaine de l'observateur
• …
• Couche -3
• Couche -2
• Couche -1
• Couche 0 couche de rendu par défaut
• Couche 1
• Couche 2
• Couche 3
• …
• Haut : couche la plus proche de l'observateur

Dans l'exemple qui suit, l'empilement des couches a été réordonné en utilisant z-index. Le bloc DIV#5, normalement en dessous, se trouve maintenant au dessus de tous les autres blocs, car il possède la plus grande valeur de z-index.

Code source de l'exemple

CSS

div {
  opacity: 0.7;
  font: 12px Arial;
}

span.bold { font-weight: bold; }

#normdiv {
  z-index: 8;
  height: 70px;
  border: 1px dashed #999966;
  background-color: #ffffcc;
  margin: 0px 50px 0px 50px;
  text-align: center;
}

#reldiv1 {
  z-index: 3;
  height: 100px;
  position: relative;
  top: 30px;
  border: 1px dashed #669966;
  background-color: #ccffcc;
  margin: 0px 50px 0px 50px;
  text-align: center;
}

#reldiv2 {
  z-index: 2;
  height: 100px;
  position: relative;
  top: 15px;
  left: 20px;
  border: 1px dashed #669966;
  background-color: #ccffcc;
  margin: 0px 50px 0px 50px;
  text-align: center;
}

#absdiv1 {
  z-index: 5;
  position: absolute;
  width: 150px;
  height: 350px;
  top: 10px;
  left: 10px;
  border: 1px dashed #990000;
  background-color: #ffdddd;
  text-align: center;
}

#absdiv2 {
  z-index: 1;
  position: absolute;
  width: 150px;
  height: 350px;
  top: 10px;
  right: 10px;
  border: 1px dashed #990000;
  background-color: #ffdddd;
  text-align: center;
}

HTML

<div id="absdiv1">
  <br /><span class="bold">DIV #1</span>
  <br />position: absolute;
  <br />z-index: 5;
</div>

<div id="reldiv1">
  <br /><span class="bold">DIV #2</span>
  <br />position: relative;
  <br />z-index: 3;
</div>

<div id="reldiv2">
  <br /><span class="bold">DIV #3</span>
  <br />position: relative;
  <br />z-index: 2;
</div>

<div id="absdiv2">
  <br /><span class="bold">DIV #4</span>
  <br />position: absolute;
  <br />z-index: 1;
</div>

<div id="normdiv">
  <br /><span class="bold">DIV #5</span>
  <br />no positioning
  <br />z-index: 8;
</div>