#13 - Слои в языке CSS

#13 - Слои в языке CSS

В этом уроке мы с вами изучим такое понятие как слои в языке CSS. Слои позволяют указывать какой элемент должен находиться выше или ниже других элементов.

Видеоурок

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

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


Мы видим, что второй блок просто перекрыл первый блок. На данный момент у нас в коде еще не прописаны слои и выглядит наш 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. Вот что у нас получилось:


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

Онлайн редактор кода

Загрузка...

Большое задание по курсу

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

Также стоит посмотреть

Создание адаптивного сайта
4 урока
Видеокурс по PHP, MySQL / Создание динамического сайта
Современная вёрстка адаптивного веб-сайта
Изучение HTML5 от нуля до гуру!
21 урок
Изучение технологии Bootstrap (верстка сайта)
16 уроков
Верстка сайта на HTML5 и CSS3
13 уроков