CSS z-index - что это. Примеры. Как сделать наложение блоков в html

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

position: absolute;
positionn: fixed;
positionn: relative;

Синтаксис CSS z-index

...
z-index: число | auto | inherit;
...

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

Значение auto означает, что браузер самостоятельно определит какой блок на каком уровне находится. Значение inherit означает наследование от родителя (предка).

Как наложить один блок на другой

Пример 1. Наложение друг на друга квадратов с z-index

В первом примере мы рассмотрим самый простой вариант со смещениями блоков через margin, чтобы добиться наложения. Обратите внимание, что везде присутствует свойство position: relative.

<html>
<head>
<style>
	.block1{
	position: relative;
	width: 100px;
	height: 100px;
	background: #9ACD32;
	z-index: 1;
	border: 1px solid #555;
	}
	.block2{
	position: relative;
	width: 100px;
	height: 100px;
	background: #76EE00;
	margin: -70px 0px 0px 30px;
	z-index: 2;
	border: 1px solid #555;
	}
	.block3{
	position: relative;
	width: 100px;
	height: 100px;
	background: #00CD00;
	margin: -70px 0px 0px 60px;
	z-index: 3;
	border: 1px solid #555;
	}
	.block4{
	position: relative;
	width: 100px;
	height: 100px;
	background: #008B00;
	margin: -70px 0px 0px 90px;
	z-index: 4;
	border: 1px solid #555;
	}
	.block5{
	position: relative;
	width: 100px;
	height: 100px;
	background: #008B45;
	margin: -70px 0px 0px 120px;
	z-index: 5;
	border: 1px solid #555;
	}
</style>
</head>
<body>
	<div class="block1"></div> 
	<div class="block2"></div> 
	<div class="block3"></div> 
	<div class="block4"></div> 
	<div class="block5"></div> 
</body>
</html>

На странице преобразуется в следующее

Сейчас у каждого нового блока z-index на единицу больше (block1 - 1, block2 - 2, block3 - 3, block4 - 4, block5 - 5). Изменим порядок z-index в нашем примере следующим образом:

block1 {z-index: 2;}
block2 {z-index: 1;}
block3 {z-index: 4;}
block4 {z-index: 5;}
block5 {z-index: 3;}

На странице преобразуется в следующее

В этом примере block4 стал выше всех, поскольку его z-index выше остальных (5). Подчеркнем еще раз, что если убрать position: relative, то это отменит действие z-index.

Для обращения к z-index из JavaScript нужно писать следующую конструкцию:

[window.]document.getElementById("elementID").style.zIndex="VALUE"

← Перейти в каталог CSS уроков