Почему не работает z-index для ::after?

Значение z-index для псевдоэлемента ::after действительно может вызывать путаницу и неожиданные результаты, и есть несколько причин для этого.

1. Контекст форматирования: Когда у вас есть несколько элементов с псевдоэлементами ::after, каждый из них будет создавать свой собственный контекст форматирования. Это означает, что наличие разных значений z-index для псевдоэлементов ::after не будет влиять на их позицию относительно друг друга. Они все будут отображаться поверх своих родительских элементов.

2. Расположение визуального контента: Псевдоэлементы ::after создаются как дочерние элементы родительского элемента. Их положение визуально находится между контентом родительского элемента и его псевдоклассами (например, ::before). При этом псевдоэлементы ::after будут находиться над контентом родительского элемента, но под другими псевдоэлементами, которые имеют более позднее позиционирование. Это влияет на то, как z-index влияет на отображение псевдоэлементов ::after.

3. Позиционирование по умолчанию: Псевдоэлементы ::after по умолчанию позиционируются относительно размеров своего родительского элемента. Если родительский элемент не имеет свойства position со значением, отличным от static, то значения z-index для псевдоэлементов ::after могут быть неэффективными. Это потому, что элементы могут быть позиционированы только в контексте, который не является статическим.

Чтобы z-index заработал для псевдоэлементов ::after, вам необходимо учитывать и установить правильное позиционирование элементов. Вы можете использовать свойство position со значением, отличным от static, таким как relative, absolute или fixed, чтобы контролировать позицию и порядок отображения псевдоэлементов ::after. Также убедитесь, что задаете значения z-index для родительского элемента, чтобы управлять иерархией отображения элементов на странице.