Exemple d'empilement 2

« CSS « Comprendre z-index en CSS

Exemple de contexte d'empilement 2

Ce deuxième exemple est très simple, mais il est essentiel à la compréhension du concept de contexte d'empilement. Nous avons les 4 mêmes blocs que l'exemple précédent, mais maintenant nous appliquons des propriétés z-index aux deux niveaux de la hiérarchie.

Figure 6 : Exemple de contexte d'empilement 2

Vous pouvez voir que le bloc DIV #2 (z-index : 2) est au dessus du bloc DIV #3 (z-index : 1), parce qu'ils appartiennent tout les deux au même contexte d'empilement (celui de la racine), donc les valeurs de z-index régissent l'empilement des éléments.

Ce qui peut apparaitre comme étrange, c'est que le bloc DIV #2 (z-index : 2) est au dessus du bloc DIV #4 (z-index : 10), malgré leurs valeurs de z-index. La raison est qu'ils n'appartiennent pas au même contexte d'empilement. Le bloc DIV #4 appartient au contexte d'empilement créé par le bloc DIV #3, et, comme expliqué précédemment, le bloc DIV #3 (et tout son contenu) est au dessous du bloc DIV #2.

Pour mieux comprendre la situation, voici la hiérarchie du contexte d'empilement :

  • Contexte d'empilement racine
    • DIV #2 (z-index 2)
    • DIV #3 (z-index 1)
      • DIV #4 (z-index 10)
Note : Il est important de se souvenir qu'en général, la hiérarchie HTML est différente de la hiérarchie du contexte d'empilement. Dans la hiérarchie du contexte d'empilement, les éléments qui ne créent pas un contexte d'empilement sont regroupés avec leur parents.

Code source de l'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 { font: 12px Arial; }

span.bold { font-weight: bold; }

#div2 { z-index: 2; }
#div3 { z-index: 1; }
#div4 { z-index: 10; }

#div1,#div3 {
   height: 80px;
   position: relative;
   border: 1px dashed #669966;
   background-color: #ccffcc;
   padding-left: 5px;
}

#div2 {
   opacity: 0.8;
   position: absolute;
   width: 150px;
   height: 200px;
   top: 20px;
   left: 170px;
   border: 1px dashed #990000;
   background-color: #ffdddd;
   text-align: center;
}

#div4 {
   opacity: 0.8;
   position: absolute;
   width: 200px;
   height: 70px;
   top: 65px;
   left: 50px;
   border: 1px dashed #000099;
   background-color: #ddddff;
   text-align: left;
   padding-left: 10px;
}


</style></head>

<body>

<br />

<div id="div1">
<br /><span class="bold">DIV #1</span>
<br />position: relative;
   <div id="div2">
   <br /><span class="bold">DIV #2</span>
   <br />position: absolute;
   <br />z-index: 2;
   </div>
</div>

<br />

<div id="div3">
<br /><span class="bold">DIV #3</span>
<br />position: relative;
<br />z-index: 1;
   <div id="div4">
   <br /><span class="bold">DIV #4</span>
   <br />position: absolute;
   <br />z-index: 10;
   </div>
</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, webskin, BenoitL, Fredchat
Dernière mise à jour par : teoli,