CSS :: Свойство z-index

css-свойство z-index (от англ. index – индекс, указатель) определяет порядок расположения позиционированных элементов по вертикали вдоль оси Z, имитируя тем самым третье измерение, перпендикулярное экрану.

Характеристики

Значение по умолчанию: auto.
Применяется: к позиционированным элементам.
Наследуется: нет.
Анимируется: да.
JavaScript: object.style.zIndex="value".

Синтаксис

z-index: <целое число> | auto

Значения

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

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-position-3/#propdef-z-index

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/z-index

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>
	
	<style>
		p{
		padding: 1em;
		border: solid 5px red;
		width: 400px;
		height: 200px;
		}
		
		.pos_1{
		position: absolute; 
		z-index: 2;
		top: 20px; 
		left: 20px;
		background-color: yellow;
		}
		
		.pos_2{
		position: absolute; 
		z-index: 3;
		top: 90px; 
		left: 150px;
		background-color: violet;
		}
	</style>
	
</head>
<body>

	<p class="pos_1">
		Позиционирован абсолютно. z-index равен 2.
	</p>
	
	<p class="pos_2">
		Позиционирован абсолютно. z-index равен 3, 
		поэтому данный абзац находится выше, т.е. 
		ближе к нам по оси z.
	</p>
	
</body>
</html>

Пример №1