В CSS каждый блок имеет положение в трех измерениях. В дополнение к позициям по осям x (горизонтальной) и y (вертикальной), боксы также имеют «ось z», по которой они укладываются друг на друга.
Свойство 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 (и, следовательно, более высокий порядок укладки!).
Заключение
Если вам понравилась эта статья, следуйте за мной в Twitter, где я ежедневно пишу о вещах, связанных с техникой!
Если вам понравилась эта статья и вы хотите оставить совет — нажмите здесь
🌎 Давайте общаться
-
Портфолио
-
Twitter
-
LinkedIn
-
Hashnode
-
Devto
-
Medium
-
Github
-
Codepen