Статьи

AtoZ CSS Быстрый совет: освоение Z-индекса

Эта статья является частью нашей серии CSS AtoZ. Вы можете найти другие записи серии здесь .
Вы можете просмотреть полную транскрипцию и скринкаст для z-indexздесь .

Добро пожаловать в нашу серию AtoZ CSS! В этой серии я исследовал различные значения CSS (и свойства), каждое из которых начинается с другой буквы алфавита. Мы знаем, что иногда скринкастов недостаточно, поэтому в этой статье мы добавили краткие советы о том, как в дальнейшем использовать z-index

z1-01

Z для z-index

Как и ожидалось, последний совет в этой серии CSS посвящен z-index

Как уже говорилось в оригинальном скринкасте о z-index , это свойство используется для управления упорядочением слоев в документе. Есть несколько сложностей вокруг контекста стека (также описанного в видео), но в целом z-index

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

z-index

Если вы хотите контролировать порядок расположения элементов, вы можете сделать это с помощью z-index Но z-indexpositionabsoluterelativefixed

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

Если это так, вы можете просто установить position: relativetoprightbottomleft Элемент останется в своем первоначальном месте на странице, поток документов не будет прерван, и значения z-index

Вы можете иметь отрицательный z-index

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

Одной из областей, где это полезно, является использование псевдоэлементов и желание разместить их позади содержимого их родительского элемента.

Из-за способа работы контекста стека отрицательное значение z-index:before:after

Взгляните на следующий Codepen и поэкспериментируйте с различными значениями z-index

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

При работе с z-index

 .modal {
  z-index: 99999;
}

Это просто выглядит для меня неприлично (и только усугубляется при добавлении !important Такие значения часто являются симптомом того, что разработчик не понимает контекст стека и пытается заставить один слой быть поверх другого.

Вместо использования произвольных чисел, таких как 99995312z-index Это не (просто), потому что у меня есть разработчик OCD. Честный.

Вместо того чтобы использовать однозначные приращения для моего z-index

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

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

При построении системы z-indexSass .

Вот и все, это последний пост в нашей серии AtoZ CSS! Мы надеемся, что вам понравилось и вы узнали много нового о многих особенностях CSS. Чтобы просмотреть все записи в этой серии, нажмите здесь .