Наткнулся на статью, которая напомнила о том, что я когда-то забыл. Прямо как «напоминалка» у Невилла Долгопупса.
Допустим, у вас по какой-то причине есть необходимость в
z-index: -1. В статье для примера приводится оформительская кавычка для цитаты, которая вставляется фоновой картинкой в карточку через псевдоэлемент ::before. Вполне логично, что если выставить z-index: -1 на ::before, то он поместится под карточку. Можно пойти дальше и поставить на контент карточки z-index: 1. Но так можно дойти до z-index: 9999, а там и до z-index hell рукой подать.В CSS есть механизм, который в оригинале называется Stacking context (контекст наложения?). По сути это такая изолированная коробочка, внутри которой
z-index работает, не глядя на другие коробочки. И есть много способов создать этот самый контекст. Но как правильно пишет в статье Франческо, почти все способы приносят с собой сайд-эффекты. Чаще всего я встречал transform: translateX(0), который может повлиять на рендеринг текста, например.Так вот, есть замечательное свойство
isolation: isolate, вся суть которого — создать контекст наложения. И всё. Без сайд-эффектов. Работает с 2015 года во всех браузерах.Прошёлся по нескольким крупным сайтам с тултипами и попапами. Там в CSS встречается больше сотни
z-index на страницу, но ни одного isolation. Видимо, не я один про него забываю.https://dev.to/francescovetere/the-css-property-you-didnt-know-you-needed-3fk0
