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

position: absolute;
positionn: fixed;
positionn: relative;
Синтаксис CSS z-index

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

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

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

[html]
<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>
[/html]

Код

Код:
<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>