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

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

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

Видеоурок

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

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


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

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

Видеокурс по PHP, MySQL / Создание динамического сайта
Изучение ASP.NET Core MVC. Создание сайтов на C#
10 уроков
Изучение HTML5 от нуля до гуру!
21 урок
Создание сайта с нуля | Полноценная верстка сайта
11 уроков
Изучение препроцессора SASS / SCSS
7 уроков
Создание адаптивного сайта
4 урока
Комментарии для сайта Cackle