В 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, до более сложных тем, таких как анимация, архитектура и многое другое !!
Спасибо за чтение! 🎉🎉🎉