This page was translated from English by the community. Learn more and join the MDN Web Docs community.

z-index

Введение

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

Для позиционируемого контейнера свойство z-index определяет:

  1. порядок наложения в текущем контексте наложения;
  2. создаёт ли контейнер локальный контекст наложения.

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

Синтаксис

/* Значение - ключевое слово */
z-index: auto;

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

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

Значения

auto
Контейнер не будет создавать локального контекста наложения. Уровень контейнера в текущем контексте наложения такой же, как и у родительского.
<integer>
Целое число определяет уровень контейнера в текущем контексте наложения. Контейнер также будет создавать локальный контекст наложения, в котором его собственный уровень будет равен 0. Это значит, что значения z-index нижестоящих элементов не будут сравниваться с z-индексами элементов вне этого контейнера.

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

auto | (en-US) <integer>

Примеры

HTML

<div class="dashed-box">Dashed box
  <span class="gold-box">Gold box</span>
  <span class="green-box">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; /* put .gold-box above .green-box and .dashed-box */
  background: gold;
  width: 80%;
  left: 60px;
  top: 3em;
}
.green-box {
  position: absolute;
  z-index: 2; /* put .green-box above .dashed-box */
  background: lightgreen;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;
  opacity: 0.9;
}

Результат

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

Спецификация Статус Комментарий
CSS Transitions
Определение 'animation behavior for z-index' в этой спецификации.		 Рабочий черновик Определяет свойство z-index как анимируемое.
CSS Level 2 (Revision 1)
Определение 'z-index' в этой спецификации.		 Рекомендация Первоначальное определение

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

BCD tables only load in the browser

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