Наложение элементов по оси Z

В данном уроке мы с вами рассмотрим наложение элементов по оси Z. По умолчанию, если два элемента накладываются друг на друга, то выше будет тот элемент, который идет ниже в HTML коде.

Давайте посмотрим на примере. Пусть у нас есть два элемента, абсолютно спозиционированных так, чтобы накладываться друг на друга. В таком случае выше будет тот элемент, который идет ниже в HTML коде:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	position: absolute;
	top: 30px;
	left: 30px;
	
	width: 100px;
	height: 100px;
	background: #ff8888;
}

#elem2 {
	position: absolute;
	top: 60px;
	left: 60px;
	
	width: 100px;
	height: 100px;
	background: #7e89eb;
}

Регулируем наложение

Порядок наложения элементов можно регулировать с помощью свойства z-index, принимающего своим значением целые положительные или отрицательные числа, либо ноль. Свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.

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

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

#elem1 {
	z-index: 2;
}
#elem2 {
	z-index: 1;
}

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

Повторите страницу по данному образцу:

Нюансы

Если z-index у элемента не задан, то его значение следует трактовать как 0. Это значит, что элемент со значением z-index, равным -1, будет ниже элемента без z-index.

Можно переделать пример с нашими двумя элементами следующим образом: просто задать второму элементу z-index в значение -1, и он станет под первый элемент:

#elem1 {
	/* не задаем z-index */
}
#elem2 {
	z-index: -1;
}

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

Повторите страницу по данному образцу: