Can'；t让z-index处理这些css背景元素

我正在尝试稍微改进我的css，特别是使用z-index来重叠元素和更改堆栈顺序。我创建了这个提琴，但当我更改z索引的值时，图层保持不变。我不能让z-index做任何事情

---

在不使用z索引的情况下，另一个div中的div始终显示在顶部。我尝试使用z-index将其放在容器div下面，但没有成功。然后我想，可能相互之间的div不能改变它们的堆栈顺序，所以我在它们之外做了另一个div，但也不能改变它的堆栈顺序。这不起作用，因为元素的

z-index

是从其父元素继承来的。要使其正常工作，您需要对以下元素进行“de-child”：

<div id="green"></div>

<div id="black"></div> 

<div id="pink"></div>

---

而且，z-index也需要有一个位置，但你有这个位置。

重叠的div需要彼此处于相同的级别。看看这把小提琴：

---

我已经创建了一个与粉色div级别相同的“其他”div。您可以尝试交换它们的z索引。

但这就是为什么我创建了一个红色的框，它不是其他的父项或子项，但我仍然无法使它工作。没问题，这里有一个来自CSS技巧的精彩视频也解释了这一点：