1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
|
---
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 <integer> */
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"><integer></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><integer></code></a></dt>
<dd>L'entier fourni (type {{cssxref("<integer>")}}) 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>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Exemples">Exemples</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><div class="boite-tirets">Boîte tirets
<span class="boite-doree">Boîte dorée</span>
<span class="boite-verte">Boîte verte</span>
</div>
</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>
|
