Z-индекс и псевдоэлементы: практический пример

В CSS свойство z-index определяет порядок расположения элементов в страница, определяющая, какие элементы появляются «перед» или «позади» других. Однако когда дело доходит до псевдоэлементов, таких как ::before или ::after, их взаимодействие с z-index иногда может быть непростым.

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

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

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

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

Чтобы решить эту проблему, одним из решений является создание отдельного элемента перед заголовком, как предложено. в ответ. Этот элемент будет действовать как контейнер для заголовка и псевдоэлемента, а его z-индекс будет правильно размещать заголовок впереди.