合并两个不同父项的嵌套元素的z索引及其堆叠上下文

Question

我一直在网上搜索我的问题的解决方案。到目前为止，我发现的所有文档都暗示我想要实现的目标是不可能的。好吧，是这样吗？用文字描述问题：

• 我有几个实体，每个实体都附有一个半透明的覆盖层。
• 必须在所有其他实体（包括父实体）后面后面呈现叠加层。
• 我在下图中提供了一个示例。

现在，挑战部分是这两个简单的规则：

• Parent Entity A和Parent Entity B必须兄弟姐妹
• Overlay A必须是 Parent A的孩子，同样适用于Overlay B

我们可以欺骗堆叠上下文来实现下面的视觉效果吗？

JS解决方案也可能是受欢迎的，但我知道我使用的是React而且我不能直接进行DOM操作，而且我们不能直接进行DOM操作。兄弟关系是必须的。

这里有一个JS fiddle playground来帮助您对此进行实验。小提琴不是解决方案，它已经作为兄弟姐妹的父母实体覆盖。

尝试将叠加层嵌套在父窗口中。

Answer 1

您可以从实体中移除z-index以防止他们创建堆叠上下文，并在叠加层上使用否定的z-index将其置于后面。

在下面的代码中，由于语义的原因，我通过伪元素定义了叠加层，但是对于真正的子元素，它将完全相同。

#entities-wrapper {
  position: relative; /* Only the wrapper (and overlays) establish */
  z-index: 0;         /* stacking contexts, entities don't.        */
}
.entity, .entity::after {
  position: absolute;
}
.entity { /* Do not use z-index here */
  width: 100px;
  height: 100px;
  text-align: center;
  font-size: 16px;
  line-height: 100px;
}
.entity::after { /* This is the overlay */
  content: '';
  display: block;
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-top: -150px;
  width: 300px;
  height: 300px;
  background: rgba(0,0,0,0.25);
  border-radius: 150px;
  z-index: -1; /* Behind the entities */
}
#a {
  background: red;
  top: 150px;
  left: 200px;
}
#b {
  background: yellow;
  top: 150px;
  left: 350px;
}

<div id="entities-wrapper">
  <div id="a" class="entity">parent entity A</div>
  <div id="b" class="entity">parent entity B</div>
</div>