Справочники CSS3 z-index

Информация по поводу - z-index

Представим у нас есть два блока, которые наложены друг на друга. Мы хотим чтобы первый блок был виден поверх второго блока, но как это сделать? Здесь на помощь как раз и приходят слои. Рассмотрим все на примере.

У нас есть два блока, которые расположены следующим образом:


Мы видим, что второй блок просто перекрыл первый блок. На данный момент у нас в коде еще не прописаны слои и выглядит наш CSS код следующим образом:
#first {
	background: #e56868;
	width: 100px;
	height: 100px;
	position: relative;
}

#second {
	background: #6db8e3;
	width: 100px;
	height: 100px;
	position: relative;
	top: -50px;
	right: -50px;
}
Теперь добавим новое свойство к первому блоку: z-index: 1. Поскольку наш второй блок вообще не имеет никакого слоя, то он автоматически равен нулевому слою. Первый блок будет иметь слой на 1 выше, а значит отображаться он будет поверх второго блока. Важно также отметить, что оба блока должны иметь свойство position: relative. Вот что у нас получилось:


Как видите, слои полезны и позволяют указывать какой блок должен быть показан поверх других блоков.