CSS 中的堆叠

问：

我正在尝试理解 CSS 中的堆叠。从我在网上读到的内容来看，以下是堆叠顺序：

1. 构成堆叠上下文的元素的背景和边框
2. 具有负堆栈级别的定位子体
3. 正常流中的块级后代
4. 漂浮的后代
5. 正常流中的内联级后代
6. 堆栈级别设置为 auto 或 （zero） 的定位子体
7. 具有正堆栈级别的定位子体

我尝试了几个实验，它们似乎都证实了这个顺序。但后来我开始在 https://github.com/home 上查看 Github 的主页，并遇到了一个似乎与此不符的案例。我正在寻求同样的解释。

在 Github 的主页上，有一个部分写着“加速高质量的软件开发。我们的人工智能平台通过提高开发人员速度的工具推动创新。此部分位于 with 类 中。有位置。其中的同级应用了类，并且定位设置为 。这有一个有位置的孩子的形象。此图像是主要背景图像，显示在着陆页顶部。divhome-campaign-productivity js-section overflow-hidden px-3 pb-8 pt-5divstaticdivcontainer-xl position-relativerelativez-indexautodivabsolute

令人惊讶的是，即使这张图片有位置，它也会出现在有位置的文本下方。absolutestatic

请一些人帮忙解释一下。