CSS от А до Я: свойство z-index

CSS от А до Я: свойство z-index

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

Полный видеоурок и его текстовую версию по свойству z-index можно посмотреть по ссылке.

Z значит z-index

Как и следовало ожидать, последняя статья в серии будет полностью посвящена свойству z-index.

Как уже было сказано в видеоуроке, свойство z-index контролирует порядок слоев в документе. С контекстом стека связано несколько сложных моментов, про которые говорилось в видеоуроке, однако в целом, свойство z-index имеет довольно ограниченный функционал.

z-index работает только с позиционированными элементами

Если вам нужно изменить порядок слоев на элементах, это можно сделать с помощью свойства z-index. Однако данное свойство будет работать только с элементами, у которых задано свойство position в значения absolute, relative или fixed.

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

Если вам нужно всего лишь изменить порядок слоев, можно просто задать свойство position: relative и не указывать top, right, bottom или left. Элемент останется на своем месте, структура документа не нарушится, а свойство z-index сработает как надо.

В свойстве z-index можно указывать отрицательные значения

Зачастую слои используются для создания сложных геометрических форм или UI компонентов. Такое наслоение подразумевает расположение элементов один над другим с постоянным увеличением значения z-index. Чтобы поместить элемент на уровень ниже, достаточно просто указать меньшее значение z-index, однако данное свойство принимает и отрицательные значения.

Отрицательные значения можно использовать с псевдоэлементами для их размещения за контентом родительского элемента.

Для размещения псевдоэлементов :before или after под текстом родительского элемента необходимо указать отрицательное значение. Таков принцип работы стека.

Взгляните на CodePen демо ниже, можете поиграться с разными значениями z-index.

Используйте 100 в качестве инкремента для z-index

При работе с z-index не принято писать код так:

.modal {
  z-index: 99999;
}

Мне больно смотреть на этот код. Все становится еще хуже, когда добавляются !important. Подобный код – признак того, что разработчик не понимает контекста стека и пытается принудительно расположить один слой над другим.

Чтобы не использовать произвольные числа типа 9999, 53 или 12, мы можем систематизировать нашу шкалу z-index и привести ее в порядок. И это не потому, что я разработчик с обсессивно-компульсивным расстройством. Честно.

В качестве инкремента для z-index я использую не однозначное число, а 100.

.layer-one   {z-index: 100;}
.layer-two   {z-index: 200;}
.layer-three {z-index: 300;}

Я взял 100, чтобы добавить организованности. Так мне понятно, сколько слоев я использую в проекте. Кроме того, если мне понадобится вставить слой между двумя другими, у меня есть целых 99 значений.

Такой ручной подход в создании системы z-index очень надежен, но он может стать еще более гибким в паре с препроцессором типа Sass.

Вот и все, друзья. Это была последняя статья из серии CSS от А до Я! Надеемся, вам понравилось, и вы узнали много нового о свойствах CSS.

Автор: Guy Routledge

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree