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
|
---
title: z-index
slug: Web/CSS/z-index
translation_of: Web/CSS/z-index
---
<div>{{CSSRef}}</div>
<p>CSS властивість <strong><code>z-index</code></strong> встановлює порядок осі Z <a href="/en-US/docs/Web/CSS/position">спозицйонованого</a> елементу, його нащадків або елементів з властивістю flex. Елементи з більшим z-index перекривають такі, в яких ця величина менша.</p>
<div>{{EmbedInteractiveExample("pages/css/z-index.html")}}</div>
<p class="hidden">Вихідний код цього інтерактивного прикладу знаходиться в репозиторії GitHub. Якщо бажаєш зробити внесок до проекту інтерактивних прикладів, склонуй <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та вишли нам pull request.</p>
<p>В спозицйонованому елементі (такому, в якому властивість <code>position</code> є будь-якою окрім <code>static</code>) властивість <code>z-index</code> вказує:</p>
<ol>
<li>Рівень накладання елемента в поточному <a href="/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context">контексті накладання</a>.</li>
<li>Чи створює цей елемент локальний контекст накладання.</li>
</ol>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="brush:css no-line-numbers">/* Властивість, зазначена ключовим словом */
z-index: auto;
/* Цифрові значення <integer> */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* Цифри менше нуля зменьшують приорітет */
/* Глобальні значення */
z-index: inherit;
z-index: initial;
z-index: unset;
</pre>
<p>Властивість <code>z-index</code> вказується або ключовим словом <code><a href="#auto">auto</a></code> або цифрою <code><a href="#<integer>"><integer></a></code>.</p>
<h3 id="Вартості">Вартості</h3>
<dl>
<dt><a id="auto" name="auto"><code>auto</code></a></dt>
<dd>Контейнер не визначає нового локального контексту накладання. Рівень накладання створеного контейнеру в поточному контексті накладання є такий самий як і батьківський.</dd>
<dt><a id="<integer>" name="<integer>"><code><integer></code></a></dt>
<dd>{{cssxref("<integer>")}} вказує рівень накладання створеного контейнеру в поточному контексті накладання. Контейнер також створює локальний контекст накладання в якому його рівень накладання дорівнює <code>0</code>. Це означає що вартість z-index елементів-нащадків не порівнюється з z-index елементів поза цим елементем.</dd>
</dl>
<h3 id="Формальний_синтаксис">Формальний синтаксис</h3>
<pre class="syntaxbox">auto <a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> {{cssxref("<integer>")}}</pre>
<h2 id="Приклади">Приклади</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><div class="dashed-box">Коробка з пунктиром
<span class="gold-box">Золота коробка</span>
<span class="green-box">Зелена коробка</span>
</div>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css; highlight:[3,11,19]">.dashed-box {
position: relative;
z-index: 1;
border: dashed;
height: 8em;
margin-bottom: 1em;
margin-top: 2em;
}
.gold-box {
position: absolute;
z-index: 3; /* розташуй .gold-box над .green-box та .dashed-box */
background: gold;
width: 80%;
left: 60px;
top: 3em;
}
.green-box {
position: absolute;
z-index: 2; /* розташуй .green-box над .dashed-box */
background: lightgreen;
width: 20%;
left: 65%;
top: -25px;
height: 7em;
opacity: 0.9;
}
</pre>
<h3 id="Результат">Результат</h3>
<p>{{ EmbedLiveSample('Examples', '550', '200', '') }}</p>
<h2 id="Специфікації">Специфікації</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Специфікація</th>
<th scope="col">Статус</th>
<th scope="col">Коментар</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Transitions', '#animatable-css', 'поводження анімації z-index')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td>Означає <code>z-index</code> як такий, який можна анімувати.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Початкове визначення</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Браузерна_сумісність">Браузерна сумісність</h2>
<div class="hidden">Таблиця сумісності на цій сторінці створена за допомогою структурованих даних. Якщо хочеш зробити свій внесок до цих даних, звернися до сторінки <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і вишли нам pull request.</div>
<p>{{Compat("css.properties.z-index")}}</p>
<h2 id="Дивись_також">Дивись також</h2>
<ul>
<li>Властивість CSS {{Cssxref("position")}}</li>
<li><a href="/en-US/docs/CSS/Understanding_z-index">Зрозуміти CSS z-index</a></li>
</ul>
|
