Стекирование в CSS ⇐ CSS

[Гость]

Я пытаюсь понять стекирование в CSS. Судя по тому, что я прочитал в Интернете, порядок укладки следующий:
[*]Фон ​​и границы элементов, образующих контекст наложения [*]Позиционированные потомки с отрицательным уровнем стека [*]Потомки на уровне блоков в обычном потоке [*]Плавающие потомки [*]Потомки строкового уровня в обычном потоке [*]Позиционированные потомки с уровнем стека, установленным как auto или (нулевой) [*]Позиционированные потомки с положительным уровнем стека
Я провел несколько экспериментов, и все они подтверждают этот порядок. Но затем я начал просматривать домашнюю страницу Github по адресу https://github.com/home и столкнулся со случаем, который, похоже, не соответствует этому. Я ищу объяснение тому же самому.

На домашней странице Github есть раздел с надписью «Ускорьте разработку высококачественного программного обеспечения. Наша платформа на базе искусственного интеллекта способствует инновациям с помощью инструментов, которые повышают скорость разработки». Этот раздел находится внутри div с классами home-campaign-productivity js-section overflow-hidden px-3 pb-8 pt-5. div имеет статическую позицию. К брату этого div применены классы container-xl Position-Relative, и он имеет относительное позиционирование с помощью z-index Для установлено значение авто. Этот div имеет дочернее изображение с абсолютной позицией. Это изображение является основным фоновым изображением, которое отображается в верхней части целевой страницы.

Удивительно, но хотя это изображение имеет абсолютную позицию, оно появляется под текстом, который имеет статическую позицию.

Могут ли кто-нибудь помочь и объяснить это.