z-index

  • Raccourci de la révision : CSS/z-index
  • Titre de la révision : CSS : la propriété z-index
  • ID de la révision : 46542
  • Créé :
  • Créateur : Kyodev
  • Version actuelle ? Non
  • Commentaire fin de la Maj

Contenu de la révision

{{wiki.template('Traduction_à_relire')}}

{{template.CSSRef()}}

Résumé

La propriété 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.

Syntaxe

z-index: auto | <entier> | inherit

Valeurs

auto 
L'élément est généré au même plan que celui de son parent. Cela ne crée pas un 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

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

Voir également

{{template.Cssxref("position")}} Comprendre le z-index en CSS


Interwiki Languages Links

{{ wiki.languages( { "en": "en/CSS/z-index", "pl": "pl/CSS/z-index" } ) }}

Source de la révision

<p>
{{wiki.template('Traduction_à_relire')}}
</p><p>{{template.CSSRef()}}
</p>
<h3 name="R.C3.A9sum.C3.A9"> Résumé </h3>
<p>La propriété <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><li> <a href="fr/CSS/Valeur_initiale">Valeur initiale</a> : 0
</li><li> Appliquée à : <a href="fr/CSS/position">éléments positionnés</a>
</li><li> <a href="fr/CSS/H%c3%a9ritage">Héritée</a> : Oui
</li><li> Média : <a href="fr/CSS/M%c3%a9dia/Visuel">Visuel</a>
</li><li> <a href="fr/CSS/Valeur_calcul%c3%a9e">Valeur calculée</a> : comme spécifié
</li></ul>
<h3 name="Syntaxe"> Syntaxe </h3>
<pre class="eval">z-index: auto | &lt;entier&gt; | <a href="fr/CSS/inherit">inherit</a>
</pre>
<h3 name="Valeurs"> Valeurs </h3>
<dl><dt> auto </dt><dd> L'élément est généré au même plan que celui de son parent. Cela <i>ne crée pas</i> un nouveau contexte d'empilement local.
</dd><dt> &lt;entier&gt; </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>
<h3 name="Exemples"> Exemples </h3>
<h3 name="Notes"> Notes </h3>
<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>
<h3 name="Sp.C3.A9cifications"> Spécifications </h3>
<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>
<h3 name="Compatibilit.C3.A9_des_navigateurs"> Compatibilité des navigateurs </h3>
<h3 name="Voir_.C3.A9galement"> Voir également </h3>
<p>{{template.Cssxref("position")}}
<a href="fr/Comprendre_le_z-index_en_CSS">Comprendre le z-index en CSS</a>
</p><p><br>
<span class="comment">Interwiki Languages Links</span>
</p>{{ wiki.languages( { "en": "en/CSS/z-index", "pl": "pl/CSS/z-index" } ) }}
Revenir à cette révision