CSS 中的堆叠

Question

我正在尝试理解 CSS 中的堆叠。根据我在网上阅读的内容，以下是堆叠顺序：

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

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

在 Github 的主页上，有一个部分写着“加速高质量软件开发。我们的人工智能平台通过提高开发人员速度的工具推动创新。”。该部分位于具有类

div

的

home-campaign-productivity js-section overflow-hidden px-3 pb-8 pt-5

中。

div

具有

static

位置。该

div

的同级应用了

container-xl position-relative

类，并且具有

relative

定位，且

z-index

设置为

auto

。这个

div

有一个孩子的图像，其位置为

absolute

。该图像是登陆页面顶部可见的主要背景图像。

令人惊讶的是，尽管该图像具有

absolute

位置，但它出现在具有

static

位置的文本下方。

请有人帮忙解释一下吗？

Answer 1

在类为

home-campaign-productivity

的 div 内部，但包含文本，是一个带有变换的 h3 元素。这个转变

...导致创建堆叠上下文。实现必须在其父堆叠上下文中以 与 z-index: 0 的定位元素相同的堆叠顺序绘制它创建的图层。如果定位了具有变换的元素，则 z-index 属性将按照 [CSS2] 中的描述应用，但 auto 被视为 0，因为始终会创建新的堆叠上下文。

因此，它属于第 6 步，与 img 元素相同，并且由于它按树顺序排列较晚，因此它及其后代在图像上进行绘制。