z-индекс

Базовая поддержка Широко доступна

Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

Свойство z-index CSS устанавливает порядок z-элемента позиционированного элемента и его потомков или элементов flex и grid. Элементы с большим значением z-индекса перекрывают элементы с меньшим.

Попробовать

Для позиционированного блока (то есть блока с любым position значением, кроме static), свойство z-index задаёт:

Уровень стека блока в текущем контексте стека.
Определяет, устанавливает ли блок локальный контекст стека.

Синтаксис

/* Keyword value */
z-index: auto;

/* <integer> values */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* Negative values to lower the priority */

/* Global values */
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-индексы потомков не сравниваются со z-индексами элементов вне этого элемента.

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

Начальное значение	`auto`
Применяется к	позиционированным элементам
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	целое число
Создаёт контекст стека	да

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

z-index = 
  auto       |
  <integer>  |
  inherit

Примеры

Визуальное упорядочение элементов

HTML

<div class="wrapper">
  <div class="dashed-box">Dashed box</div>
  <div class="gold-box">Gold box</div>
  <div class="green-box">Green box</div>
</div>

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; /* 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;
}

Результат

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

Спецификация
Спецификация Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) # z-индекс

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`z-index`	1	12	1	4	1	18	4	14	1	1.0	4.4
`auto`	1	12	1	15	1	18	4	14	1	1.0	4.4
`negative_values`	1	12	3	4	1	18	4	14	1	1.0	4.4

См. также

Свойство CSS position
Понимание CSS z-индексов

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index