From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- files/uk/web/css/z-index/index.html | 134 ++++++++++++++++++++++++++++++++++++ 1 file changed, 134 insertions(+) create mode 100644 files/uk/web/css/z-index/index.html (limited to 'files/uk/web/css/z-index/index.html') diff --git a/files/uk/web/css/z-index/index.html b/files/uk/web/css/z-index/index.html new file mode 100644 index 0000000000..364b1044a2 --- /dev/null +++ b/files/uk/web/css/z-index/index.html @@ -0,0 +1,134 @@ +--- +title: z-index +slug: Web/CSS/z-index +translation_of: Web/CSS/z-index +--- +
{{CSSRef}}
+ +

CSS властивість z-index встановлює порядок осі Z спозицйонованого елементу, його нащадків або елементів з властивістю flex. Елементи з більшим z-index перекривають такі, в яких ця величина менша.

+ +
{{EmbedInteractiveExample("pages/css/z-index.html")}}
+ + + +

В спозицйонованому елементі (такому, в якому властивість position є будь-якою окрім static) властивість z-index вказує:

+ +
    +
  1. Рівень накладання елемента в поточному контексті накладання.
    2. +
  2. Чи створює цей елемент локальний контекст накладання.
    3. +
+ +

Синтаксис

+ +
/* Властивість, зазначена ключовим словом */
+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;
+
+ +

Властивість z-index вказується або ключовим словом auto або цифрою <integer>.

+ +

Вартості

+ +
+
auto
+
Контейнер не визначає нового локального контексту накладання. Рівень накладання створеного контейнеру в поточному контексті накладання є такий самий як і батьківський.
+
<integer>
+
{{cssxref("<integer>")}} вказує рівень накладання створеного контейнеру в поточному контексті накладання. Контейнер також створює локальний контекст накладання в якому його рівень накладання дорівнює 0. Це означає що вартість z-index елементів-нащадків не порівнюється з z-index елементів поза цим елементем.
+
+ +

Формальний синтаксис

+ +
auto | {{cssxref("<integer>")}}
+ +

Приклади

+ +

HTML

+ +
<div class="dashed-box">Коробка з пунктиром
+  <span class="gold-box">Золота коробка</span>
+  <span class="green-box">Зелена коробка</span>
+</div>
+
+ +

CSS

+ +
.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;
+}
+
+ +

Результат

+ +

{{ EmbedLiveSample('Examples', '550', '200', '') }}

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('CSS3 Transitions', '#animatable-css', 'поводження анімації z-index')}}{{Spec2('CSS3 Transitions')}}Означає z-index як такий, який можна анімувати.
{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}{{Spec2('CSS2.1')}}Початкове визначення
+ +

{{cssinfo}}

+ +

Браузерна сумісність

+ + + +

{{Compat("css.properties.z-index")}}

+ +

Дивись також

+ + -- cgit v1.2.3-54-g00ecf