CSS堆叠顺序异常：GitHub首页绝对定位图片显示在静态定位文本下方的技术咨询

嗨，这个问题其实是**堆叠上下文（stacking context）**在“搞事情”，你之前了解的常规堆叠顺序规则并没有被打破——只是你没注意到这两个元素属于不同的堆叠上下文，它们的堆叠优先级由各自所在的上下文层级决定，而非单个元素的定位属性。

先给你理清楚核心逻辑：常规的堆叠顺序（比如绝对定位元素默认在静态元素之上）只在同一个堆叠上下文内部生效。如果两个元素分属不同的堆叠上下文，那么谁的“父级堆叠上下文”层级更高，谁就会显示在上面，哪怕内部元素是绝对定位的。

回到你观察的GitHub首页场景：

• 文本所在的home-campaign-productivity div虽然是静态定位，但它的某个祖先元素大概率创建了一个独立的堆叠上下文（可能是设置了z-index: 1这类非auto的值，或者用到了transform、opacity < 1、filter这类会触发堆叠上下文的属性）。
• 而那个绝对定位图片的父元素container-xl position-relative，虽然是相对定位，但因为z-index: auto，它并没有创建自己的堆叠上下文。所以这个图片实际上属于它最近的、创建了堆叠上下文的外层祖先。

这时候，如果文本所在的堆叠上下文的层级，比图片所在的堆叠上下文层级更高，那么哪怕图片是绝对定位，它也会被压在静态文本的下面——这完全符合CSS堆叠上下文的规则。

举个简单的例子帮你理解：

<!-- 这个div创建了z-index为1的堆叠上下文 -->
<div style="position: relative; z-index: 1;">
  <div style="position: static; padding: 20px; background: white;">我是静态文本</div>
</div>

<!-- 这个div创建了z-index为0的堆叠上下文 -->
<div style="position: relative; z-index: 0; margin-top: -40px;">
  <div style="position: absolute; padding: 20px; background: lightblue;">我是绝对定位元素</div>
</div>

在这个例子里，绝对定位的蓝色块会被静态的白色文本覆盖，因为它们所在的堆叠上下文层级不同——白色文本的上下文层级更高。

你可以用浏览器开发者工具验证这个猜想：打开Chrome的Elements面板，选中目标元素后，查看Computed选项卡下的「Stacking Context」项，就能看到元素所属的堆叠上下文信息；或者用Layers面板直观看到各个元素的层级关系。

备注：内容来源于stack exchange，提问作者Vaibhav