От автора: я всегда испытывал трудности со свойством z index CSS. Сначала это звучит очень просто. Элементы с более высоким значением z-индекса отображаются перед теми, у которых значение z-index меньше. Тем не менее, много раз я попадал в ситуации, когда кажется, что значение z-index вообще не дает никакого эффекта.
Я решил, что хватит с меня проб и ошибок с z-index, и я хотел бы лучше разобраться в этом вопросе. Я надеюсь, что эта статья поможет вам, и вы никогда не будете удивляться, почему z-index не делает то, что вы ожидаете от него.
Порядок укладки в стек по умолчанию
Давайте сначала рассмотрим порядок по умолчанию, в котором браузер укладывает элементы в стек, когда не применяется z-index:
Корневой элемент (элемент html)
Непозиционированные элементы в том порядке, в котором они определены
Позиционированные элементы в том порядке, в котором они определены
Непозиционированный элемент — это элемент со значением для position по умолчанию static. Позиционированный элемент представляет собой элемент с любым другим значением position. Примерами других значений являются: absolute, relative, sticky или fixed.
<div class="pink"> <div class="orange"></div> </div> <div class="blue"></div> <div class="green"></div>
/ * Это только CSS, который подходит для примера. Чтобы увидеть полный CSS, перейдите по ссылкам ниже изображений. * /
.blue, .pink, .orange { position: absolute;
}
https://codepen.io/ivhed/pen/QrdEBB
Мы определили зеленый блок последним в документе. Тем не менее, он отображается за остальными блоками, потому что он непозиционирован.
Укладка в стек с помощью z-index
Если теперь мы хотим изменить порядок укладки этих элементов, мы можем использовать свойство z-index. Элемент с более высоким значением z-index будет отображаться перед элементом с более низким значением. Следует отметить, что z-index работает только с позиционированными элементами.
.blue, .pink, .orange { position: absolute;
}
.blue { z-index: 2;
}
.orange { z-index: 3;
}
.green { z-index: 100; // не дает никакого эффекта, поскольку зеленый блок не позиционирован
}
https://codepen.io/ivhed/pen/xjqmpV
Перед синим блоком отображается оранжевый блок с более высоким значением z-index.
Контекст стеков
Предположим, что мы добавили в макет еще один позиционируемый блок, который хотим разместить за розовой рамкой. Мы обновляем наш код следующим образом:
<div class="pink"> <div class="orange"></div> </div> <div class="blue"></div> <div class="purple"></div> <div class="green"></div>
.blue, .pink, .orange, .purple { position: absolute;
}
.purple { z-index: 0;
}
.pink { z-index: 1;
}
.blue { z-index: 2;
}
.orange { z-index: 3;
}
.green { z-index: 100;
}
https://codepen.io/ivhed/pen/YLZdjx
Наш розовый блок отображается перед фиолетовым коробком, как и ожидалось, но что случилось с оранжевым блоком? Почему он внезапно за синим, хотя у него более высокий z-index? Это связано с тем, что добавление значения z-index для элемента формирует то, что называется контекстом стекирования.
Розовый блок имеет значение z-index, отличное от auto, которое формирует новый контекст стекирования. Тот факт, что он формирует контекст стекирования, влияет на то, как отображаются его дочерние элементы.
Можно изменить порядок укладки дочерних элементов розового блока. Однако их z-index имеет смысл только в контексте стекирования. Это означает, что мы не сможем перенести оранжевый блок перед синим, потому что они не находятся в одном и том же контексте стекирования.
Если мы хотим, чтобы синий и оранжевый блоки были частью одного и того же контекста стекирования, мы можем определить синий блок в качестве дочернего элемента розового. Это приведет к появлению синего блока за оранжевым.
<div class="pink"> <div class="orange"></div> <div class="blue"></div> </div> <div class="purple"></div> <div class="green"></div>
https://codepen.io/ivhed/pen/erGoJE
Контексты стекирования формируются не только при применении к элементу z-index. Существует несколько других свойств, которые заставляют элементы формировать контексты стекирования. Некоторые примеры: filter, opacity и transform.
Вернемся к нашему предыдущему примеру. Синий блок снова является одноуровневым элементом для розового блока. На этот раз вместо добавления для розового прямоугольника z-index мы применим к нему фильтр.
<div class="pink"> <div class="orange"></div> </div> <div class="blue"></div> <div class="green"></div>
.blue, .pink, .orange { position: absolute;
}
.pink { filter: hue-rotate(20deg);
}
.blue { z-index: 2;
}
.orange { z-index: 3;
}
.green { z-index: 100;
}
https://codepen.io/ivhed/pen/LmWMQb
Оранжевый блок по-прежнему имеет более высокий z-index, по сравнению с синим, но все еще отображается позади него. Это связано с тем, что значение фильтра заставило розовый блок сформировать новый контекст стекирования.
Заключение
Используя z-index для позиционируемых элементов, мы можем изменить порядок укладки по умолчанию. При применении определенных свойств CSS элемент может формировать контекст стекирования. Значения z-index имеют смысл только в одном контексте стекирования.
Автор: Veronika Ivhed
Источник: https://medium.freecodecamp.org/
Редакция: Команда webformyself.