---
title: z-index
slug: Web/CSS/z-index
tags:
  - CSS
  - Propriété
  - Reference
translation_of: Web/CSS/z-index
---
<div>{{CSSRef}}</div>

<p>La propriété <strong><code>z-index</code></strong> définit le « <em>z-order</em> » (NdT : « ordre z » n'est pas usité) d'un élément <a href="/fr/docs/Web/CSS/position">positionné</a> et de ses éléments fils ou de ses éléments flexibles (les enfants d'un élément avec <code>display: flex</code>). Lorsque des éléments se chevauchent, le <em>z-order</em> détermine l'ordre des différentes couches que formeront les éléments. Généralement, un élément couvrira un autre élément si sa valeur de  <code>z-index</code> est supérieure à celle du deuxième élément.</p>

<div>{{EmbedInteractiveExample("pages/css/z-index.html")}}</div>

<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>

<p>Pour les boîtes positionnées (celles pour lesquelles <code>position</code> est différent de <code>static</code>), la propriété <code>z-index</code> définit :</p>

<ol>
 <li>Le niveau de la boîte dans la pile par rapport <a href="/fr/docs/Web/CSS/Comprendre_z-index/L'empilement_de_couches">au contexte d'empilement</a> courant</li>
 <li>Si la boîte crée un contexte d'empilement local.</li>
</ol>

<p>L'exemple ci-avant illustre l'impact de <code>z-index</code>. À gauche, on a dessiné trois boîtes qui se chevauchent avec <a href="/fr/docs/Learn/CSS/CSS_layout/Positioning#Absolute_positioning">un positionnement absolu</a>. Par défaut, les éléments sont empilés dans l'ordre dans lequel ils sont déclarés dans le document HTML. À droite, on présente le même document mais l'ordre des couches a été inversé grâce à <code>z-index</code>.</p>

<h2 id="Syntaxe">Syntaxe</h2>

<pre class="brush:css no-line-numbers">/* Avec un mot-clé */
z-index: auto;

/* valeurs entières */
/* type &lt;integer&gt; */
z-index: 0;
z-index: 3;
z-index: 289;
  /* On peut avoir des
   valeurs négatives pour
   réduire la propriété */
z-index: -1;

/* Valeurs globales */
z-index: inherit;
z-index: initial;
z-index: unset;
</pre>

<p>La propriété <code>z-index</code> se définit grâce au mot-clé <code><a href="#auto">auto</a></code> ou grâce à une valeur entière (<code><a href="#integer">&lt;integer&gt;</a></code>).</p>

<h3 id="Valeurs">Valeurs</h3>

<dl>
 <dt><a id="auto" name="auto"><code>auto</code></a></dt>
 <dd>La boîte ne crée pas de nouveau contexte d'empilement. Le niveau d'empilement de la boîte dans le contexte d'empilement courant est le même que celui de la boîte parente.</dd>
 <dt><a id="integer" name="integer"><code>&lt;integer&gt;</code></a></dt>
 <dd>L'entier fourni (type {{cssxref("&lt;integer&gt;")}}) sera le niveau de la boîte dans la pile d'empilement pour le contexte d'empilement courant. La boîte crée un nouveau contexte d'empilement pour lequel son niveau est <code>0</code>. Cela signifie que les index z des descendants ne sont pas comparés à ceux des éléments en dehors de l'élément.</dd>
</dl>

<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>

{{csssyntax}}

<h2 id="Exemples">Exemples</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div class="boite-tirets"&gt;Boîte tirets
  &lt;span class="boite-doree"&gt;Boîte dorée&lt;/span&gt;
  &lt;span class="boite-verte"&gt;Boîte verte&lt;/span&gt;
&lt;/div&gt;
</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css; highlight:[3,11,19]">.boite-tirets {
  position: relative;
  z-index: 1;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
}
.boite-doree {
  position: absolute;
  z-index: 3; /* .boite-doree sera au-dessus de .boite-verte et .boite-tirets */
  background: gold;
  width: 80%;
  left: 60px;
  top: 3em;
}
.boite-verte {
  position: absolute;
  z-index: 2; /* .boite-verte sera au-dessus de .boite-tirets */
  background: lightgreen;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;
  opacity: 0.9;
}
</pre>

<h3 id="Résultat">Résultat</h3>

<p>{{EmbedLiveSample('Exemple', '550', '200', '')}}</p>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#animatable-css', "Comportement de z-index pour l'animation")}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td>Définit <code>z-index</code> comme pouvant être animé.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Définition initiale</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>

<p>{{Compat("css.properties.z-index")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>La propriété CSS {{cssxref("position")}}</li>
 <li><a href="/fr/docs/Web/CSS/Comprendre_z-index">Comprendre le fonctionnement de <code>z-index</code></a></li>
</ul>