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

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

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

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

 .modal {
  z-index: 99999;
}

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