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
145
146
147
148
149
|
---
title: Ajouter z-index
slug: Web/CSS/Comprendre_z-index/Ajout_de_z-index
tags:
- Avancé
- CSS
- Guide
- z-index
translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index
---
<div>{{CSSRef}}{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_et_float","Web/CSS/Comprendre_z-index/Empilement_de_couches", "Web/CSS/Comprendre_z-index")}}</div>
<h2 id="Ajouter_z-index">Ajouter <code>z-index</code></h2>
<p>Dans le premier exemple, <a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_sans_z-index">« empilement sans <code>z-index</code> »</a>, illustre comment l'empilement fonctionne par défaut. Pour définir un ordre d'empilement différent, il faut utiliser la propriété CSS {{cssxref("z-index")}}.</p>
<p>Cette propriété, dont l'attribut est une valeur entière (positive ou négative), représente la position de l'élément le long de l'axe Z. Pour se représenter cette notion, on peut imaginer que la page possède plusieurs couches, les unes au dessus des autres. Chaque couche est numérotée. Un couche avec une grande valeur de <code>z-index</code> est affichée par dessus toutes celles dont la valeur est inférieure à la sienne.</p>
<div class="warning">
<p><strong>Attention :</strong> <code>z-index</code> a un effet sur les éléments uniquement si ceux-ci sont <a href="/fr/docs/Web/CSS/position">positionnés</a>.</p>
</div>
<ul>
<li><em>Bas : couche la plus lointaine de l'observateur</em></li>
<li>…</li>
<li>Couche -3</li>
<li>Couche -2</li>
<li>Couche -1</li>
<li>Couche 0 <em>couche de rendu par défaut</em></li>
<li>Couche 1</li>
<li>Couche 2</li>
<li>Couche 3</li>
<li>…</li>
<li><em>Haut : couche la plus proche de l'observateur</em></li>
</ul>
<div class="note">
<p><strong>Notes :</strong></p>
<ul>
<li>Lorsque la propriété <code>z-index</code> n'est pas définie, les éléments sont rendus sur la couche 0 par défaut.</li>
<li>Si plusieurs éléments possède la même valeur de <code>z-index</code> (c'est-à-dire qu'ils sont placés sur la même couche), alors les règles d'empilement expliquées dans <a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_sans_z-index">empilement sans <code>z-index</code></a> s'appliquent.</li>
</ul>
</div>
<p>Dans l'exemple qui suit, l'empilement des couches a été réordonné en utilisant <code>z-index</code>. Le <code>z-index</code> du bloc DIV#5 n'a pas d'effet, l'élément n'étant pas positionné.</p>
<p>{{EmbedLiveSample("Code_source_de_l’exemple", '468', '365')}}</p>
<h2 id="Code_source_de_l’exemple"><strong>Code source de l’exemple</strong></h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><div id="abs1">
<b>DIV #1</b>
<br />position: absolute;
<br />z-index: 5;
</div>
<div id="rel1">
<b>DIV #2</b>
<br />position: relative;
<br />z-index: 3;
</div>
<div id="rel2">
<b>DIV #3</b>
<br />position: relative;
<br />z-index: 2;
</div>
<div id="abs2">
<b>DIV #4</b>
<br />position: absolute;
<br />z-index: 1;
</div>
<div id="sta1">
<b>DIV #5</b>
<br />no positioning
<br />z-index: 8;
</div>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">div {
padding: 10px;
opacity: 0.7;
text-align: center;
}
b {
font-family: sans-serif;
}
#abs1 {
z-index: 5;
position: absolute;
width: 150px;
height: 350px;
top: 10px;
left: 10px;
border: 1px dashed #900;
background-color: #fdd;
}
#rel1 {
z-index: 3;
height: 100px;
position: relative;
top: 30px;
border: 1px dashed #696;
background-color: #cfc;
margin: 0px 50px 0px 50px;
}
#rel2 {
z-index: 2;
height: 100px;
position: relative;
top: 15px;
left: 20px;
border: 1px dashed #696;
background-color: #cfc;
margin: 0px 50px 0px 50px;
}
#abs2 {
z-index: 1;
position: absolute;
width: 150px;
height: 350px;
top: 10px;
right: 10px;
border: 1px dashed #900;
background-color: #fdd;
}
#sta1 {
z-index: 8;
height: 70px;
border: 1px dashed #996;
background-color: #ffc;
margin: 0px 50px 0px 50px;
}
</pre>
<p>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_et_float","Web/CSS/Comprendre_z-index/Empilement_de_couches", "Web/CSS/Comprendre_z-index")}}</p>
|
