Enregistrer | Connexion

Mozilla.com

  1. MDC
  2. Accueil
  3. Comprendre le z-index en CSS
  4. Ajout de z-index
Sommaire
    1. 1.1. Ajout de z-index
    2. 1.2. Exemple
  2. 2. Informations sur le document original
Redirigé depuis Fr/Comprendre le z-index en CSS:Ajout de z-index

Ajout de z-index

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>

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

Languages

Page modifiée à 10:58, 7 Jan 2007 par BenoitL

Tags:

Fichiers (0)