diff options
Diffstat (limited to 'files/uk/web/css/z-index/index.html')
| -rw-r--r-- | files/uk/web/css/z-index/index.html | 134 |
1 files changed, 0 insertions, 134 deletions
diff --git a/files/uk/web/css/z-index/index.html b/files/uk/web/css/z-index/index.html deleted file mode 100644 index 364b1044a2..0000000000 --- a/files/uk/web/css/z-index/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -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> |