Накладення елементів по осі 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;
}

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

Повторіть сторінку за цим зразком: