Question

我的理解是z-index元素是only stacked with their siblings。我也读过那个z-index "doesn't work" with position: fixed。但是，我一起使用这两个，它碰巧完全按照我的意愿行事;我想了解原因。

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

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

Answer 1

每个未定位的框属于同一堆叠上下文，该上下文由最接近的祖先建立，符合列出here列出的任何条件，或者如果没有这样的祖先则属于根元素。这意味着元素不必是彼此的兄弟姐妹，以便参与相同的堆叠环境。他们可能共享一个遥远的祖先（在HTML中，每个元素都来自根元素），但他们不必共享父。

.top未为其后代.yes和.no建立新的堆叠上下文，因为它未定位且其z-index为auto。因此，.yes，.no和.blocker都参与相同的堆叠上下文 - 根堆叠上下文。因此，仅.yes具有比.blocker更高的z指数的事实导致它被绘制在前面。

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

何时/如何z-index打破堆叠上下文？

1 个答案: