为什么具有较低z-index的固定定位元素是具有较高z-index的相对定位元素的前面？

Question

我有一个控制滚动相关动画的代码。身体的直接孩子互相放在一起。所以第一个元素有z-index 0，第二个元素有z-index 1，依此类推。所有这些都是包装，具有相对位置。他们的孩子首先有相对位置，如果元素到达窗口的顶部，它的位置切换到固定。如果它发生了，它的包装器返回到图层面板（z-index：100），位于另一个位置为fixed的元素后面，并且使用z-index 2.这有点奇怪，因为如果包装器的子节点有位置：相对而言，包装器占据了正确的位置。在孩子的位置变为固定之后，它会立即回到图层中。这些事情之间有什么关系？为了更好地理解，我附上一些来自chrome devtools，图层的图片： 这里，黑色元素是子元素，渐变元素是父元素。父母按z轴的顺序停留在正确的位置，孩子的位置为：relative。 在这里，只有几个滚动，孩子获得位置：固定，父母回去（z-index 100）。这里发生了什么？为什么父母回到图层，如果它的孩子有位置：固定？