CSS стиль z-index

z-index - CSS стиль, для наложения позиционированных элементов на веб-странице.

Каждый элемент может находиться выше или ниже других объектов веб-страницы. Их положением по оси Z управляет свойство z-index. Оно применяется только для элементов, у которых значение position имеет значения absolute, fixed или relative (т.е. к позиционированным элементам).

Настольные Мобильные

Краткая информация по CSS-свойству z-index

Значение по умолчанию	`auto`
Наследуется	Нет
Применяется	К позиционированным элементам
Анимируется	Да

Правила написания свойства z-index

z-index: <значение> | auto

Здесь значение - целое число (положительное, отрицательное или нуль). Чем больше значение, тем выше находится элемент по сравнению с теми элементами, у которых оно меньше. Если у элементов z-index одинаков, то выше будет тот элемент, который в HTML коде стоит ниже.

Кроме числовых значений применяется auto. В этом случае порядок элементов строится автоматически, в зависимости от положения элементов в HTML коде и принадлежности к родителю, т.к. дочерние элементы имеют тот же номер, что и их родитель.

Объектная модель

Объект.style.zIndex

Пример применения стиля z-index

Проиллюстрируем работу z-index, поменяв расположение блоков по оси Z:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Меняем порядок блоков</title>
  <style>
   .block {position: absolute; width: 100px; height: 100px; color: #fff;}
   .block--below {top: 50px; left: 50px; z-index: 5; background: red;}
   .block--higher {top: 100px; left: 100px; z-index: 10; background: green;}
   </style>
 </head>
 <body>
   <div class="block block--higher">Выше</div>
   <div class="block block--below">Ниже</div>
 </body>
</html>

Применение свойства z-index для позиционирования элементов.