CSS свойство `z-index`

Определение и применение

z-index управляет порядком перекрытия элементов. В одном контексте наложения элемент с большим индексом отображается поверх элемента с меньшим.

Свойство применяется к позиционированным элементам с position: relative, absolute, fixed или sticky, а также к Flexbox- и Grid-элементам, даже при position: static.

Подробнее о способах позиционирования — в статье учебника CSS «Позиционирование элементов».

Попробуйте значения z-index

Два позиционированных блока перекрываются. У синего z-index: 2; меняется порядок оранжевого в том же контексте наложения.

Значение свойстваz-index: 0;z-index: 1;z-index: 3;

z-index: 0

HTML и CSS примера

HTML

<div class="stage">
  <div class="demo-target">Меняем z-index</div>
  <div class="neighbor">z-index: 2</div>
</div>

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 200px;
  position: relative;
  isolation: isolate;
  border: 2px dashed #607589;
  padding: 12px;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  padding: 10px;
  border: 2px solid #245a85;
  background: #ffe4bd;
  position: absolute;
  top: 20px;
  left: 20px;
  width: 160px;
  height: 100px;
  z-index: 0;
}
.neighbor {
  padding: 8px;
  background: #b9d7eb;
}
.neighbor {
  position: absolute;
  top: 65px;
  left: 75px;
  width: 160px;
  height: 100px;
  z-index: 2;
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 200px;
  position: relative;
  isolation: isolate;
  border: 2px dashed #607589;
  padding: 12px;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  padding: 10px;
  border: 2px solid #245a85;
  background: #ffe4bd;
  position: absolute;
  top: 20px;
  left: 20px;
  width: 160px;
  height: 100px;
  z-index: 1;
}
.neighbor {
  padding: 8px;
  background: #b9d7eb;
}
.neighbor {
  position: absolute;
  top: 65px;
  left: 75px;
  width: 160px;
  height: 100px;
  z-index: 2;
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 200px;
  position: relative;
  isolation: isolate;
  border: 2px dashed #607589;
  padding: 12px;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  padding: 10px;
  border: 2px solid #245a85;
  background: #ffe4bd;
  position: absolute;
  top: 20px;
  left: 20px;
  width: 160px;
  height: 100px;
  z-index: 3;
}
.neighbor {
  padding: 8px;
  background: #b9d7eb;
}
.neighbor {
  position: absolute;
  top: 65px;
  left: 75px;
  width: 160px;
  height: 100px;
  z-index: 2;
}

Поддержка браузерами

Спецификация: css2

Поддерживается во всех основных браузерах с 2015 года.

ВсеКомпьютерыМобильные

Совместимостьcss.properties.z-index
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`z-index`	✓1	✓12	✓1	✓4	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
`auto`	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
Negative values	✓1	✓12	✓3	✓4	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS

/* Уровень без собственного контекста наложения */
z-index: auto;

/* Целое число: положительное, отрицательное или 0 */
z-index: <integer>;

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

<integer> — целое число без единиц измерения. Например, допустимы 2, 0 и -1.

JavaScript синтаксис:

JavaScript

element.style.zIndex = "2";

Начальное значение свойства

auto.

Значения свойства

Значения z-index
Значение	Описание
`auto`	Уровень в текущем контексте — `0`. Само значение не создаёт новый контекст наложения и не наследует индекс родителя. Начальное значение.
`<integer>`	Целое число без единиц: например, `-1`, `0` или `2`. Задаёт уровень и создаёт собственный контекст наложения. Дроби и значения с `px` недопустимы.
`initial`	Устанавливает начальное значение свойства.
`inherit`	Наследует вычисленное значение свойства у родительского элемента.
`unset`	Для ненаследуемого свойства `z-index` устанавливает его начальное значение.
`revert`	Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
`revert-layer`	Сбрасывает значение свойства для текущего слоя каскада `@layer`. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Слои каскада @layer задают приоритет CSS-правил, а не положение элементов друг над другом. Порядок наложения меняется, только если после отката изменится итоговое значение z-index.

Контекст наложения

Контекст наложения — группа элементов, которая участвует во внешнем порядке слоёв как единое целое. Индексы её потомков сравниваются внутри группы: ребёнок с индексом 999 не может оказаться выше соседнего контекста с индексом 2, если собственный родитель находится на уровне 1.

В корневом контексте находятся родитель A с position: relative и z-index: 1 и оверлей B с position: fixed и z-index: 2. Внутри A расположено обычное позиционированное окно с z-index: 999. Весь A вместе с окном рисуется под B. Число 999 не сравнивается с 2. Схема не относится к top layer. — Индексы потомков сравниваются внутри своего контекста. Схема показывает обычные элементы, без верхнего слоя.

Новый контекст создают, в частности:

position: relative или absolute вместе с числовым z-index, включая 0;
position: fixed и sticky, даже при z-index: auto;
Flexbox- и Grid-элементы с числовым z-index;
opacity меньше 1, transform или filter со значением, отличным от none;
mix-blend-mode со значением, отличным от normal;
will-change со свойством, которое создаёт контекст, например will-change: transform;
isolation: isolate.

Почему z-index не работает

Проверьте, применяется ли свойство: обычному блоку с position: static, который не является Flexbox- или Grid-элементом, индекс не поможет.
Проверьте контексты родителей: увеличение индекса ребёнка не меняет положение всей группы.
Проверьте обрезку: z-index не отменяет overflow: hidden или clip.

Особенности порядка слоёв

При равном индексе у обычных позиционированных соседей в одном контексте выше рисуется тот, который стоит позже в HTML. Отрицательный индекс помещает элемент ниже нулевого уровня внутри его контекста, а не обязательно за всей страницей; фон другого элемента может его закрыть.

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

Cascading Style Sheets Level 2 Revision 2 (CSS 2.2).

Наследуется

Нет.

Анимируемое

Да, как целое число: промежуточные значения округляются до целых. Переход между auto и числом — дискретный.

Примеры, попробуйте сами

Порядок слоёв

Блоки перекрываются в одном контексте наложения: чем больше z-index, тем выше блок. Замените у красного блока -1 на 4 — он окажется поверх остальных.

base.css

CSS

div {
    height: 100px;
    width: 100px;
    border: 1px solid black;
    color: white;
}
.test1 {
    left: 15px;
    top: 15px;
    background-color: red;
}
.test2 {
    left: 30px;
    top: 35px;
    background-color: blue;
}
.test3 {
    left: 45px;
    top: 20px;
    background-color: green;
    text-align: right;
}
.test4 {
    left: 60px;
    top: 60px;
    background-color: sienna;
    text-align: right;
}

index.html

HTML

<div class="test1">Красный</div>
<div class="test2">Синий</div>
<div class="test3">Зелёный</div>
<div class="test4">Коричневый</div>

style.css

CSS

div {
    position: absolute; /* Позиционирование позволяет управлять порядком слоёв. */
}
.test1 {
    z-index: -1; /* Красный блок — под остальными. Попробуйте поставить 4. */
}
.test2 {
    z-index: 3; /* Синий блок — сверху. */
}
.test3 {
    z-index: 2; /* Зелёный блок — под синим, над коричневым. */
}
.test4 {
    z-index: 1; /* Коричневый блок — над красным. */
}

Вложенные контексты

У ребёнка индекс 9999, но сосед перекрывает его: родитель создаёт контекст с индексом 1. Замените у родителя 1 на 3 — вся группа окажется выше соседа.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    color: #172c3d;
    font: 15px/1.4 system-ui;
}
.scene {
    min-height: 230px;
}
.parent {
    width: 190px;
    height: 155px;
    padding: 12px;
    border: 2px dashed #526477;
    background: #edf2f5;
}
.child {
    left: 35px;
    top: 55px;
    width: 155px;
    height: 105px;
    padding: 12px;
    background: #ffe1a8;
    border: 2px solid #805300;
}
.neighbor {
    left: 95px;
    top: 105px;
    width: 155px;
    height: 105px;
    padding: 55px 8px 8px;
    background: #b9d7eb;
    border: 2px solid #245a85;
}

index.html

HTML

<div class="scene">
  <div class="parent">
    Родитель
    <div class="child">Дочерний блок</div>
  </div>
  <div class="neighbor">Соседний блок</div>
</div>

style.css

CSS

.scene {
    position: relative;
}
.parent {
    position: relative;
    z-index: 1; /* Поднимите всю группу: замените 1 на 3. */
}
.child {
    position: absolute;
    z-index: 9999; /* Индекс действует внутри родительского контекста. */
}
.neighbor {
    position: absolute;
    z-index: 2;
}

Разница между auto и 0

Сначала дочерний блок перекрывает соседа. Замените у родителя auto на 0: появится отдельный контекст и ребёнок окажется под соседом, хотя его собственный индекс не изменился.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    color: #172c3d;
    font: 15px/1.4 system-ui;
}
.scene {
    min-height: 230px;
}
.parent {
    width: 190px;
    height: 155px;
    padding: 12px;
    border: 2px dashed #526477;
    background: #edf2f5;
}
.child {
    left: 35px;
    top: 55px;
    width: 155px;
    height: 105px;
    padding: 12px;
    background: #ffe1a8;
    border: 2px solid #805300;
}
.neighbor {
    left: 95px;
    top: 105px;
    width: 155px;
    height: 105px;
    padding: 55px 8px 8px;
    background: #b9d7eb;
    border: 2px solid #245a85;
}

index.html

HTML

<div class="scene">
  <div class="parent">
    Родитель
    <div class="child">Дочерний блок</div>
  </div>
  <div class="neighbor">Соседний блок</div>
</div>

style.css

CSS

.scene {
    position: relative;
}
.parent {
    position: relative;
    z-index: auto; /* Замените на 0, чтобы создать контекст. */
}
.child {
    position: absolute;
    z-index: 2;
}
.neighbor {
    position: absolute;
    z-index: 1;
}

Слои Flexbox-элементов без position

Оба блока имеют обычное position: static. Первый перекрывает второй благодаря z-index. Замените его индекс 2 на 0: второй блок окажется сверху. То же правило применяется к Grid-элементам.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    color: #172c3d;
    font: 15px/1.4 system-ui;
}
.cards {
    min-height: 200px;
    padding-top: 12px;
}
.cards > div {
    flex: 0 0 145px;
    height: 120px;
    padding: 12px;
    border: 2px solid #526477;
}
.first {
    background: #ffe1a8;
}
.cards > .second {
    margin-left: -55px;
    margin-top: 45px;
    padding-top: 75px;
    background: #b9d7eb;
}

index.html

HTML

<div class="cards">
  <div class="first">Первый</div>
  <div class="second">Второй</div>
</div>

style.css

CSS

.cards {
    display: flex; /* z-index работает у непосредственных flex-элементов. */
}
.first {
    z-index: 2; /* Попробуйте 0: первый блок уйдёт под второй. */
}
.second {
    z-index: 1;
}

CSS свойство z-index

Определение и применение

Попробуйте значения z-index

Поддержка браузерами

Начальное значение свойства

Значения свойства

Контекст наложения

Почему z-index не работает

Особенности порядка слоёв

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

Наследуется

Анимируемое

Примеры, попробуйте сами

Порядок слоёв

Вложенные контексты

Разница между auto и 0

Слои Flexbox-элементов без position

CSS свойство `z-index`