z-index 何时/如何破坏堆叠上下文？ [复制]

Question

我的理解是z-index元素是only stacked with their siblings。我也读过 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

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

.top 不会为其后代 .yes 和 .no 建立新的堆叠上下文，因为它是非定位的并且它的 z-index 是自动的。因此，.yes、.no 和 .blocker 都参与同一个堆栈上下文——根堆栈上下文。因此，.yes 的 z-index 比.blocker 更高这一事实导致它被绘制在前面。

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