When/How z-index 会破坏堆叠上下文吗？

Question

我的理解是z-index元素是only stacked with their siblings. I've also read that z-index "doesn't work" with position: fixed。但是，我将两者结合使用，它恰好做了我想要的事情；我想知道为什么。

我有一个阻塞 div 需要覆盖页面中除一个元素之外的所有内容。该元素不是阻止程序的同级元素，我认为这会使它变得不可能，但它起作用了。这里利用了什么规则，我如何预测它是否适用于其他浏览器？

.top {
  background-color: yellow;
}

.yes {
  position: relative;
  z-index: 10;
  background-color: blue;
}

.no {
  position: relative;
  z-index: 1;
  background-color: red;
}

.blocker {
  position: fixed;
  z-index: 5;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .7);
}

<div class="top">
  <button class="yes">
    Yes
  </button>
  <button class="no">
    No
  </button>
</div>
<div class="blocker">

</div>

Answer 1

每个 non-positioned 框都属于由满足所列任何条件的最近祖先建立的相同堆叠上下文 here，如果没有这样的祖先，则为根元素。这意味着元素不必是彼此的兄弟姐妹即可参与相同的堆叠上下文。它们可能共享一个远距离的 ancestor（在 HTML 中，每个元素都从根元素派生），但它们不必共享 parent.

.top 不会为其后代 .yes 和 .no 建立新的堆栈上下文，因为它是 non-positioned 而它的 z-index 是自动的。因此，.yes、.no 和 .blocker 都参与同一个堆栈上下文——根堆栈上下文。结果，.yes 的 z-index 比 .blocker 高这一事实导致它被涂在前面。

请注意，虽然 .yes、.no 和 .blocker 中的每一个都建立了自己的堆栈上下文，但它们 建立的堆栈上下文 是此处不相关；这是他们参与的堆栈上下文，并且他们都参与同一个根堆栈上下文。

When/How z-index 会破坏堆叠上下文吗？

When/How does z-index break stacking context?

css

z-index