Почему transform перекрывает before?

Question

[Brad9aga]

в общем суть:
почему transform примененный к img перекрывает before

https://developer.mozilla.org/ru/docs/Web/CSS/z-index
https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...
кто обьяснит спасибо ,я не вкурил информацию.

Comments

[WapSter]

Чет я не совсем понял вопрос

[Brad9aga]

Тимур Турсунбаев, чо не понятно
почему transform примененный к img перекрывает before

[WapSter]

Brad9aga, может потому, что у вас в примере before и after перекрывают img, а не наоборот? Вот "что" мне не понятно.

[Brad9aga]

Тимур Турсунбаев, ты тупишь вместе со мной, только в другом направлении

[WapSter]

Brad9aga, ничего не перекрывается, как и должно работать img оказался под псевдоэлементами.

[Brad9aga]

Тимур Турсунбаев, открой зенки и увидь before

[WapSter]

Brad9aga, все уведел. Не хами пожалуйста, а то в следующий раз и не помогут. И люди с телефонов тоже сидят, и спросмотра одного кода без тулзов не видно. https://habr.com/ru/post/166435/

[Brad9aga]

Тимур Турсунбаев, я не хамил.

[Brad9aga]

Тимур Турсунбаев, уже давно все решили

[WapSter]

Brad9aga, удачи раз разобрался) ну только на толкну на мысль, почему z-index 1 у before ставит его на передний план, по идее у img он тоже 1, ну или почему у родителя z-index: 0 != auto. Удачи умник, хотя там еще куча подводных камней с потоком.

Answer 1

[Александр Зачиналов]

Потому что итоговый порядок дочерних элементов .wrap выглядит так:
1) :before
2) img
3) :after
следовательно автоматический присвоенный z-index у img будет большим, чем у :before и изображение расположится на слой выше (между :before и :after, в соответствии с порядком вложенности). Это можно регулировать только фактическим назначением z-index'ов внутри родителя (как вы и закомментировали в примере)

Comments

[Brad9aga]

а по поводу контекста можешь разъяснить ?

[Brad9aga]

Xdevelx, вопрос читай внимательней

[Александр Зачиналов]

ну это про то, что контекст наполнения содержимого блока прямо зависит от порядка следования его потомков, за исключением тех элементов, свойства которых попадают под перечисленный по ссылке список. Свойства, указанные в списке, заставляют блок отображаться на отдельном слое, как бы выдирая его из последовательного контекста родителя на более верхние уровни, либо корень документа. Вы можете наглядно изучить контекст наложения на страницах вашего проекта, используя инструмент chrome devtools "Layers" (если в вкладка отсутствует в консоли, то вызываем меню под "троеточием" в правом верхнем углу devtools и выбираем вкладку Layers)

[Brad9aga]

Александр Зачиналов, спасибо