В CSS у каждого квадрата есть позиция в трех измерениях. В дополнение к позициям по оси X (по горизонтали) и оси Y (по вертикали), блоки также имеют ось Z, где они накладываются друг на друга.

🤓 Хотите быть в курсе новостей веб-разработчиков?
🚀 Хотите, чтобы последние новости доставлялись прямо на ваш почтовый ящик?
🎉 Присоединяйтесь к растущему сообществу дизайнеров и разработчиков!

Подпишитесь на мою рассылку здесь → https://easeout.eo.page

Свойство z-index определяет порядок расположения элементов по оси z. Он работает только с элементами, для которых определена позиция (кроме значения по умолчанию position:static;).

Поэтому, когда у вас есть несколько перекрывающихся элементов на странице, z-index позволяет вам решить, какой из них будет виден (или ближе к пользователю), а также порядок любых элементов, которые находятся за ним.

Например:

.element1 {   
   /* other styles ... */
   position: absolute;
   z-index: 1; 
}
.element2 {   
   /* other styles ... */
   position: absolute;
   z-index: 2; 
}

Свойство принимает число, чем выше число, тем ближе элемент к пользователю.

И довольно интуитивно, если мы поменяем наши значения порядка так:

.element1 {   
   /* other styles ... */
   position: absolute;
   z-index: 2; 
}
.element2 {   
   /* other styles ... */
   position: absolute;
   z-index: 1; 
}

Порядок наложения изменится:

Также можно использовать отрицательные числа.

А когда значение z-index не задано, элементы складываются в том порядке, в котором они появляются в нашем HTML.

Хорошее практическое правило - допускать пропуски в числах при работе с z-index. Например, используйте «10», а затем «20». Таким образом, будет достаточно места для размещения элемента в вашем порядке наложения, без необходимости перенумеровать каждый элемент!

Также следует отметить, что вложенные элементы ведут себя по-разному. Например, дочерний элемент элемента A никогда не будет выше элемента B, если B имеет меньшее значение z-index (и, следовательно, более высокий порядок наложения!).

Готовы ли вы поднять свои навыки CSS на новый уровень? Начните прямо сейчас с моей новой электронной книги: Руководство по CSS: Полное руководство по современному CSS. Будьте в курсе всего, от основных концепций, таких как Flexbox и Grid, до более сложных тем, таких как анимация, архитектура и многое другое !!

Спасибо за чтение! 🎉🎉🎉