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

Question

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

标签： javascripthtmlcss