Почему это работает? (не перекрывается) Псевдоэлемент с позицией: абсолютной и текстом с позицией: относительной ⇐ Html

[Гость]

Мне нужна помощь в понимании логики CSS-кода У меня есть тег с псевдоэлементом с абсолютным позиционированием и красным фоном. Тег имеет вложенный элемент с текстом.

В данном случае псевдоэлемент перекрывает элемент. Это кажется логичным.

Но если я добавлю позицию: относительно элемента, текст будет виден! И я не могу понять такого поведения. Почему это работает? Пожалуйста, объясните мне.

Пример: https://codepen.io/testpro1/pen/eYbyEVx
Lorem ipsum Pain Sit Amet, consectetur adipiscing элита, но он съедает временные инциденты из-за родов и боли. С небольшой и минимальной жилкой я хочу тренировать ullamco Laboris нуждается в aliquip ex и удобном consequat. основной::перед { позиция: абсолютная; ширина: 500 пикселей; высота: 200 пикселей; содержание: ""; фон: красный; } } статья {статья положение: относительное; } }