Ajout de z-index

par 4 contributeurs :

« CSS « Comprendre z-index en CSS

Ajout de z-index

Le premier exemple, Empilement sans z-index, explique le comportement par défaut de l'empilement de couches. Pour définir un ordre d'empilement différent, il est nécessaire d'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. Si vous n'êtes pas familier avec la notion d'axe Z, imaginez-vous 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 rendue par dessus toutes celle dont la valeur est inférieure à la sienne.

  • Base : 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
  • Sommet : couche la plus proche de l'observateur

Notes :

  • Lorsque la propriété z-index n'est pas définie, les éléments sont rendus dans la couche 0 par défaut.
  • Si plusieurs éléments possède la même valeur de z-index (c'est-à-dire qu'ils sont placés sur la même couche), alors les règles d'empilement expliquées dans Empilement sans z-index s'appliquent.

Dans l'exemple suivant, 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.

Figure 1. Exemple de règles d'empilement modifiées avec la propriété z-index

Exemple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><style type="text/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;
}

</style></head>

<body>

<br /><br />

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

</body></html>

Voir aussi

 

Informations sur le document original

  • Auteur(s) : Paolo Lombardi
  • Copyright : This article is the English translation of an article I wrote in Italian for YappY. I grant the right to share all the content under Creative Commons: Attribution-Sharealike license
  • Dernière Mise à jour : 9 juillet 2005

Interwiki Languages Links

Étiquettes et contributeurs liés au document

Contributeurs à cette page : teoli, tregagnon, BenoitL, Fredchat
Dernière mise à jour par : teoli,