z-index

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

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

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

Синтаксис

/* Властивість, зазначена ключовим словом */
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>
<integer> вказує рівень накладання створеного контейнеру в поточному контексті накладання. Контейнер також створює локальний контекст накладання в якому його рівень накладання дорівнює 0. Це означає що вартість z-index елементів-нащадків не порівнюється з z-index елементів поза цим елементем.

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

Приклади

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

Результат

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

Специфікація Статус Коментар
CSS Transitions
The definition of 'поводження анімації z-index' in that specification.		 Working Draft Означає z-index як такий, який можна анімувати.
CSS Level 2 (Revision 1)
The definition of 'z-index' in that specification.		 Recommendation Початкове визначення
Initial valueauto
Applies topositioned elements
Inheritedno
Computed valueas specified
Animation typean integer
Creates stacking contextyes

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

BCD tables only load in the browser

Дивись також