z-index

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

Вихідний код цього інтерактивного прикладу знаходиться в репозиторії GitHub. Якщо бажаєш зробити внесок до проекту інтерактивних прикладів, склонуй https://github.com/mdn/interactive-examples та вишли нам pull request.

В спозицйонованому елементі (такому, в якому властивість 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 елементів поза цим елементем.

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

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

Результат

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

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

Дивись також

• Властивість CSS position
• Зрозуміти CSS z-index