Brad9aga, все уведел. Не хами пожалуйста, а то в следующий раз и не помогут. И люди с телефонов тоже сидят, и спросмотра одного кода без тулзов не видно. https://habr.com/ru/post/166435/
Brad9aga, удачи раз разобрался) ну только на толкну на мысль, почему z-index 1 у before ставит его на передний план, по идее у img он тоже 1, ну или почему у родителя z-index: 0 != auto. Удачи умник, хотя там еще куча подводных камней с потоком.
Потому что итоговый порядок дочерних элементов .wrap выглядит так:
1) :before
2) img
3) :after
следовательно автоматический присвоенный z-index у img будет большим, чем у :before и изображение расположится на слой выше (между :before и :after, в соответствии с порядком вложенности). Это можно регулировать только фактическим назначением z-index'ов внутри родителя (как вы и закомментировали в примере)
ну это про то, что контекст наполнения содержимого блока прямо зависит от порядка следования его потомков, за исключением тех элементов, свойства которых попадают под перечисленный по ссылке список. Свойства, указанные в списке, заставляют блок отображаться на отдельном слое, как бы выдирая его из последовательного контекста родителя на более верхние уровни, либо корень документа. Вы можете наглядно изучить контекст наложения на страницах вашего проекта, используя инструмент chrome devtools "Layers" (если в вкладка отсутствует в консоли, то вызываем меню под "троеточием" в правом верхнем углу devtools и выбираем вкладку Layers)
Простой
ничего не перекрывается, как и должно работать img оказался под псевдоэлементами. 