Переклад цієї статті ще триває.

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 елементів поза цим елементем.

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

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 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
Mediavisual
Computed valueas specified
Animation typean integer
Canonical orderthe unique non-ambiguous order defined by the formal grammar
Creates stacking contextyes

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
z-indexChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 4Safari Full support 1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
Negative valuesChrome Full support 1Edge Full support 12Firefox Full support 3IE Full support 4Opera Full support 4Safari Full support 1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

Дивись також

Мітки документа й учасники

Зробили внесок у цю сторінку: mr-vikster
Востаннє оновлена: mr-vikster,