受不透明度影响的元素的堆叠顺序

受不透明度影响的元素的堆叠顺序

具有“自动”以外的z索引值的定位元素和不透明度值小于1的元素将生成堆叠上下文。请参阅有关喷漆顺序的规则。

在您的第一个示例中，我们具有带有多个后代的根堆栈上下文，包括：

• 定位的Z-index为正的绿色框
• 带有

  auto

  z-index的蓝色框

带有

auto

z-index 的蓝色框位于后面；Z索引为正的绿色框位于前面（请参见规则8和9）。

在您的第二个示例中，我们有：

• 具有不透明度的元素（包含绿色框；请注意，绿色框上的z-index对该元素而言是局部的）
• 没有z-index的定位蓝色框

这两个要素属于同一类别（见规则8）。在这种情况下，HTML顺序确定哪个元素出现在前面。蓝色框按源顺序显示在后面，因此它出现在前面。