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

Синтаксис

селектор {
	z-index: число | auto | inherit;
}

Число должно быть целым, положительным или отрицательным. Может быть нулем.

Значения

Значение Описание
Число Целое число задает порядок наложения элементов: при накладывании элементов друг на друга сверху окажется тот, у которого z-index больше.
auto Порядок наложения строится автоматически: выше будет тот элемент, который расположен ниже в html коде.
inherit Наследует значение родителя.

Значение по умолчанию: auto.

Примеры

Пример

В данном примере блоки будут накладываться друг на друга в порядке их следования в HTML коде (z-index не задан и будет иметь значение по умолчанию - auto). Первый блок будет в самом низу (красный), а последний - выше всех (зеленый):

<div id="div1">Красный</div>
<div id="div2">Голубой</div>
<div id="div3">Зеленый</div>
#div1 {
	position: absolute; 
	top: 30px; 
	left: 30px; 
	background: red;
}
#div2 {
	position: absolute; 
	top: 60px; 
	left: 60px; 
	background: blue;
}
#div3 {
	position: absolute; 
	top: 90px; 
	left: 90px; 
	background: green;
}

Результат выполнения кода:

Пример

Поменяем порядок наложения, задав z-index. Красному блоку - 3, голубому - 2, зеленому - 1. Порядок наложения поменяется на обратный (выше всех будет блок с z-index 3):

<div id="div1">Красный</div>
<div id="div2">Голубой</div>
<div id="div3">Зеленый</div>
#div1 {
	position: absolute; 
	top: 30px; 
	left: 30px; 
	background: red;
	z-index: 3;
}
#div2 {
	position: absolute; 
	top: 60px; 
	left: 60px; 
	background: blue;
	z-index: 2;
}
#div3 {
	position: absolute; 
	top: 90px; 
	left: 90px; 
	background: green;
	z-index: 1;
}

Результат выполнения кода: