z-index

  • Raccourci de la révision : CSS/z-index
  • Titre de la révision : z-index
  • ID de la révision : 355305
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{ CSSRef() }}

Résumé

La propriété CSS z-index définit l'ordre-z (empilement selon l'axe Z) d'un élément et de ses descendants. Quand des éléments se chevauchent, l'ordre-z définit lequel recouvre l'autre. Un élément avec un niveau z-index élevé recouvre généralement celui dont le niveau z-index est bas.

  • {{Xref_cssinitial()}} {{Cssxref("auto")}}
  • S'applique à {{Cssxref("position","éléments positionnés")}}
  • {{Xref_cssinherited()}} Oui
  • Média {{Xref_cssvisual()}}
  • {{Xref_csscomputed()}} comme spécifié

Syntaxe

z-index: auto | <entier> | inherit

Valeurs

auto 
L'élément est généré dans le même plan que son parent. Cela ne crée pas de nouveau contexte d'empilement local.
<entier> 
L'élément est dessiné à l'ordre-z défini. Cela crée un nouveau contexte d'empilement local, ce qui signifie que tous ses descendants seront aussi dessinés à ce niveau de z-index. Cela veut dire que les niveaux z-index des descendants ne seront pas comparés avec ceux situés au dehors de celui-ci.

Exemples

position:relative; z-index:1; position:absolute; z-index:3;
left:20em; top:-25px; opacity:0.9
position:absolute; z-index:2; left:60px; top:3em;

Notes

Des valeurs négatives de z-index sont supportées correctement depuis Gecko 1.9 / Firefox 3. Auparavant, les précédentes versions implémentaient le comportement CSS 2, pas celui de CSS 2.1 qui est compatible avec d'autres navigateurs.

Spécifications

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base 1.0 {{ CompatGeckoDesktop("1") }}

4.0

4.0

1.0
Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Voir également

Source de la révision

<p>{{ CSSRef() }}</p>
<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2>
<p>La propriété <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> <code>z-index</code> définit l'ordre-z (empilement selon l'axe Z) d'un élément et de ses descendants. Quand des éléments se chevauchent, l'ordre-z définit lequel recouvre l'autre. Un élément avec un niveau z-index élevé recouvre généralement celui dont le niveau z-index est bas.</p>
<ul class="cssprop">
  <li><dfn>{{Xref_cssinitial()}} </dfn>{{Cssxref("auto")}}</li>
  <li><dfn>S'applique à </dfn>{{Cssxref("position","éléments positionnés")}}</li>
  <li><dfn>{{Xref_cssinherited()}} </dfn>Oui</li>
  <li><dfn>Média </dfn>{{Xref_cssvisual()}}</li>
  <li><dfn>{{Xref_csscomputed()}} </dfn>comme spécifié</li>
</ul>
<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
<pre class="eval">
z-index: auto | &lt;entier&gt; | <a href="fr/CSS/inherit">inherit</a>
</pre>
<h3 id="Valeurs" name="Valeurs">Valeurs</h3>
<dl>
  <dt>
    auto&nbsp;</dt>
  <dd>
    L'élément est généré dans le même plan que son parent. Cela <i>ne crée pas</i> de nouveau contexte d'empilement local.</dd>
  <dt>
    &lt;entier&gt;&nbsp;</dt>
  <dd>
    L'élément est dessiné à l'ordre-z défini. Cela crée un nouveau contexte d'empilement local, ce qui signifie que tous ses descendants seront aussi dessinés à ce niveau de z-index. Cela veut dire que les niveaux z-index des descendants ne seront pas comparés avec ceux situés au dehors de celui-ci.</dd>
</dl>
<h2 id="Exemples" name="Exemples">Exemples</h2>
<div style="border:dashed; position:relative; z-index:1; height:8em; margin-bottom:1em">
  position:relative; z-index:1; <span style="background:lightgreen; position:absolute; z-index:3; left:20em; top:-25px; height:7em; opacity:0.9">position:absolute; z-index:3;<br />
  left:20em; top:-25px; opacity:0.9</span> <span style="background:gold; position:absolute; z-index:2; left:60px; top:3em; ">position:absolute; z-index:2; left:60px; top:3em;</span></div>
<h2 id="Notes" name="Notes">Notes</h2>
<p>Des valeurs négatives de <code>z-index</code> sont supportées correctement depuis <a href="fr/Gecko">Gecko</a> 1.9 / <a href="fr/Firefox_3_pour_les_d%c3%a9veloppeurs">Firefox 3</a>. Auparavant, les précédentes versions implémentaient le comportement CSS 2, pas celui de CSS 2.1 qui est compatible avec d'autres navigateurs.</p>
<h2 id="Sp.C3.A9cifications" name="Sp.C3.A9cifications">Spécifications</h2>
<ul>
  <li><a class="external" href="http://www.yoyodesign.org/doc/w3c/css2/visuren.html#propdef-z-index">CSS 2 (fr)</a></li>
  <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index">CSS 2.1 (en)</a></li>
</ul>
<h2 id="Compatibilit.C3.A9_des_navigateurs" name="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonction</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>1.0</td>
        <td>{{ CompatGeckoDesktop("1") }}</td>
        <td>
          <p>4.0</p>
        </td>
        <td>
          <p>4.0</p>
        </td>
        <td>1.0</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonction</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Voir_.C3.A9galement" name="Voir_.C3.A9galement">Voir également</h2>
<ul>
  <li>La propriété CSS {{ Cssxref("position") }}</li>
  <li><a href="/fr/CSS/Comprendre_z-index" title="fr/CSS/Comprendre_z-index">Comprendre le z-index en CSS</a></li>
</ul>
Revenir à cette révision