Css z索引何时/如何中断堆叠上下文？

我的理解是z索引元素是。我也读过z索引。然而，我将两者结合起来使用，它恰好做了我想做的事情；我想知道为什么

我有一个阻塞div，它需要覆盖页面中除一个元素之外的所有内容。元素不是拦截器的兄弟，我认为这会使它变得不可能，但它起了作用。这里使用的是什么规则，我如何预测它是否能在其他浏览器中工作

.top{
背景颜色：黄色；
}
.是的{
位置：相对位置；
z指数：10；
背景颜色：蓝色；
}
不{
位置：相对位置；
z指数：1；
背景色：红色；
}
.拦截器{
位置：固定；
z指数：5；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,7）；
}

对
不

每个未定位的框都属于相同的堆叠上下文，该堆叠上下文由满足所列任何条件的最近祖先或根元素（如果没有此类祖先）建立。这意味着元素不必是彼此的兄弟，就可以参与相同的堆叠上下文。它们可能共享一个遥远的祖先（在HTML中，每个元素都是根元素的后代），但它们不必共享父元素

.top

不会为其子体建立新的堆叠上下文

。是

和

。否

，因为它是未定位的，并且其z索引是自动的。因此，

.yes

、

.no

和

.blocker

都参与相同的堆叠上下文-根堆叠上下文。因此，仅仅是

.yes

比

.blocker

具有更高的z指数这一事实就导致它被画在前面

---

请注意，虽然

.yes

、

.no

和

.blocker

中的每一个都建立了自己的堆叠上下文，但它们建立的堆叠上下文在这里并不相关；它们参与的是堆叠上下文，并且它们都参与相同的根堆叠上下文。

您的理解不正确。具有

位置：fixed

的元素与

z-index

一起工作。这可能对您有用：