z-index

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

CSS-свойство z-index определяет положение позиционированного элемента и его дочерних элементов или флекс-элементов по оси z. Перекрывающие элементы с большим значением z-index будут накладываться поверх элементов с меньшим z-index.

Интерактивный пример

Для позиционированного элемента (т.е. если у него задано свойство position со значением, отличающимся от static) свойство z-index отвечает за:

  1. Порядок наложения в текущем контексте наложения.
  2. Возможность создания локального контекста наложения.

Синтаксис

css
/* Ключевые слова */
z-index: auto;

/* Значения типа <integer> */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* Отрицательные значения понижают приоритет */

/* Глобальные значения */
z-index: inherit;
z-index: initial;
z-index: revert;
z-index: revert-layer;
z-index: unset;

Значением свойства z-index может быть либо auto, либо целое число (<integer>).

Значения

auto

Элемент не будет создавать нового локального контекста наложения. Порядок наложения блока в текущим контексте наложения будет равен 0.

<integer>

Порядок наложения блока, заданный в виде целого числа (<integer>) в текущем контексте наложения. При этом элемент создаёт новый локальный контекст наложения. Таким образом значения z-index дочерних элементов внутри нового контекста наложения не будут сравниваться со значениями z-index элементов за пределами этого блока.

Формальное определение

Начальное значениеauto
Применяется кпозиционированные элементы
Наследуетсянет
Обработка значениякак указано
Animation typeцелое число
Создаёт контекст наложенияда

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

z-index = 
auto |
<integer> |
inherit

Примеры

Визуальное наложение элементов

HTML

html
<div class="wrapper">
  <div class="dashed-box">Пунктирный блок</div>
  <div class="gold-box">Блок золотого цвета</div>
  <div class="green-box">Зелёный блок</div>
</div>

CSS

css
.wrapper {
  position: relative;
}

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

Результат

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

Specification
Cascading Style Sheets Level 2
# z-index

Совместимость с браузерами

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
z-index
auto
Negative values

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Смотрите также