Html 组合两个不同父元素的嵌套元素的z索引及其堆栈上下文

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

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

现在，挑战部分是以下两条简单规则：

• 父实体A

  和

  父实体B

  必须是彼此的兄弟

• 覆盖A

  必须是父A的子级，覆盖B也必须是父A

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

JS解决方案可能也很受欢迎，但要知道，我使用的是React，不能直接进行DOM操作，父级和同级关系是必须的

这里有一个例子可以帮助你做这个实验。Fiddle不是解决方案，它将重叠作为父实体的兄弟

试着将覆盖层嵌套在它们的父母体内

---

您可以从实体中删除

z-index

，以防止它们创建堆叠上下文，并在覆盖层上使用负

z-index

，将它们放在后面

在下面的代码中，由于语义的原因，我通过伪元素定义了覆盖，但是对于真正的子元素，它的工作原理是完全相同的

#实体包装器{
位置：相对；/*仅包装（和覆盖）建立*/
z索引：0；/*堆叠上下文，实体不堆叠上下文*/
}
.entity、.entity:：之后{
位置：绝对位置；
}
.entity{/*此处不使用z索引*/
宽度：100px；
高度：100px；
文本对齐：居中；
字体大小：16px；
线高：100px；
}
.entity:：在{/*之后是覆盖*/
内容：''；
显示：块；
左：50%；
最高：50%；
左边距：-150px；
利润上限：-150px；
宽度：300px；
高度：300px；
背景：rgba（0,0,0,0.25）；
边界半径：150px；
z索引：-1；/*位于实体后面*/
}
#a{
背景：红色；
顶部：150px；
左：200px；
}
#b{
背景：黄色；
顶部：150px；
左：350px；
}

母实体A
母实体B

使用纯CSS是不可能的。将父实体视为“文件夹”：当文件夹A的内容位于文件夹A之上时，它不能位于文件夹B之下。您必须重新考虑您的方法。@DanielDiekmeier我不局限于纯css，在任何情况下都可以吗？@skyline3000请阅读：伪元素生成框，就好像它们是原始元素的直接子元素一样“我甚至还加了一张便条，解释这对真正的孩子有用，看看你是否信服。我之所以使用伪元素是因为语义。@Oriol这很有效，非常感谢你的帮助！！！虽然，在我的问题中，我在父级上也有z索引，但我将尝试重构我的代码。我接受这个答案，这正是我想要的技巧：）！