Note :La hiérarchie des contextes d'empilement est un sous-ensemble de la hiérarchie des éléments HTML, car seuls les éléments positionnés dans l'espace (avec la propriétéz-index créent des contextes d'empilement. On peut dire que les éléments qui ne créent pas leur propre contexte d'empilement sontassimilés par le contexte d'empilement parent.

Note :

• DIV #4 est rendu dans le blocDIV #1 car lez-index (5) de celui-ci est valide à l'intérieur du contexte d'empilement de l'élément racine, alors que lez-index (6) du blocDIV #4 est valide à l'intérieur du contexte d'empilement du blocDIV #3. Ainsi, DIV #4 se trouve sousDIV #1, parce queDIV #4 appartient àDIV #3, qui possède une valeur dez-index plus petite.
• Pour la même raisonDIV #2 (dont lez-index est 2) est rendu sousDIV#5 (dez-index égal à 1) parce queDIV #5 appartient àDIV #3, qui possède une valeur dez-index plus grande.
• Lez-index du blocDIV #3 est 4, mais cette valeur est indépendante duz-index du blocDIV #4,DIV #5 etDIV #6, parce qu'il appartient à un contexte d'empilement différent.
• Une méthode simple pour déterminerl'ordre de rendu des éléments empilés sur l'axe Z consiste à considérer cette valeur comme un numéro de version où les éléments enfants sont des versions mineures, placées sous les versions majeures portées par leurs parents. Ainsi, on peut voir comment un élément avec une propriétéz-index à 1 (DIV #5) est placé au-dessus d'un élément avecz-index à 2 (DIV #2), et comment un élément avecz-index à 6 (DIV #4) est empilé sous un élément avecz-index à 5 (DIV #1). Dans notre exemple, en triant selon l'ordre de rendu final, on a :
  • Racine
    • DIV #2 - z-index à 2
    • DIV #3 - z-index à 4
      • DIV #5 - z-index à 1, empilé sous un élément avecz-index à 4, qui aboutit à un ordre de rendu de 4.1
      • DIV #6 - z-index à 3, empilé sous un élément avecz-index à 4, qui aboutit à un ordre de rendu de 4.3
      • DIV #4 - z-index à 6, empilé sous un élément avecz-index à 4, qui aboutit à un ordre de rendu de 4.6
    • DIV #1 - z-index à 5

<div>  <h1>Élément de division n°1</h1>  <code    >position: relative;<br />    z-index: 5;</code  ></div><div>  <h1>Élément de division n°2</h1>  <code    >position: relative;<br />    z-index: 2;</code  ></div><div>  <div>    <h1>Élément de division n°4</h1>    <code      >position: relative;<br />      z-index: 6;</code    >  </div>  <h1>Élément de division n°3</h1>  <code    >position: absolute;<br />    z-index: 4;</code  >  <div>    <h1>Élément de division n°5</h1>    <code      >position: relative;<br />      z-index: 1;</code    >  </div>  <div>    <h1>Élément de division n°6</h1>    <code      >position: absolute;<br />      z-index: 3;</code    >  </div></div>

* {  margin: 0;}html {  padding: 20px;  font:    12px/20px Arial,    sans-serif;}div {  opacity: 0.7;  position: relative;}h1 {  font: inherit;  font-weight: bold;}#div1,#div2 {  border: 1px dashed #696;  padding: 10px;  background-color: #cfc;}#div1 {  z-index: 5;  margin-bottom: 190px;}#div2 {  z-index: 2;}#div3 {  z-index: 4;  opacity: 1;  position: absolute;  top: 40px;  left: 180px;  width: 330px;  border: 1px dashed #900;  background-color: #fdd;  padding: 40px 20px 20px;}#div4,#div5 {  border: 1px dashed #996;  background-color: #ffc;}#div4 {  z-index: 6;  margin-bottom: 15px;  padding: 25px 10px 5px;}#div5 {  z-index: 1;  margin-top: 15px;  padding: 5px 10px;}#div6 {  z-index: 3;  position: absolute;  top: 20px;  left: 180px;  width: 150px;  height: 125px;  border: 1px dashed #009;  padding-top: 125px;  background-color: #ddf;  text-align: center;}

Help improve MDN

Cette page a été modifiée le9 nov. 2025 par lescontributeurs du MDN.