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 ⁨июль 2015 г.⁩.

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

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

z-index: auto;

z-index: 1;

z-index: 3;

z-index: 5;

z-index: 7;

<section>  <div>Change my z-index</div>  <div>z-index: 6</div>  <div>z-index: 4</div>  <div>z-index: 2</div>  <div>z-index: auto</div>  <div>z-index: auto</div>  <div>z-index: auto</div></section>

#example-element {  top: 15px;  left: 15px;  width: 180px;  height: 230px;  position: absolute;  /* center the text so it is visible even when z-index is set to auto */  line-height: 215px;  font-family: monospace;  background-color: #fcfbe5;  border: solid 5px #e3e0a1;  z-index: auto;  color: black;}.container {  display: inline-block;  width: 250px;  position: relative;}.block {  width: 150px;  height: 50px;  position: absolute;  font-family: monospace;  color: black;}.blue {  background-color: #e5e8fc;  border: solid 5px #112382;  /* move text to the bottom of the box */  line-height: 55px;}.red {  background-color: #fce5e7;  border: solid 5px #e3a1a7;}.position1 {  top: 0;  left: 0;  z-index: 6;}.position2 {  top: 30px;  left: 30px;  z-index: 4;}.position3 {  top: 60px;  left: 60px;  z-index: 2;}.position4 {  top: 150px;  left: 0;  z-index: auto;}.position5 {  top: 180px;  left: 30px;  z-index: auto;}.position6 {  top: 210px;  left: 60px;  z-index: auto;}

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

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

Синтаксис

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>  <div>Пунктирный блок</div>  <div>Блок золотого цвета</div>  <div>Зелёный блок</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;}