来自 MDN 的 z-index 的 'version number' 方法不起作用？
The 'version number' method for z-index from MDN doesn't work?
MDN 建议在 Stacking Context 下使用版本号，其中子元素被赋予版本号（例如，如果子元素的 z-index 为 6 并且包含在 z-index 为 4 的父元素中版本号为 4.6）。它使用此方法轻松解释了 z-index 5 的 parent/child 堆栈外部的 div 如何出现在 z-index 6 的子元素上方（因为它的版本号为 4.6）。但是，我在下面构建了一个示例，该示例无法使用此方法。黄色 div（z-index 1）是红色 div（z-index 0）的子项，我输入了蓝色 div，z-index 为 0。 version number 方法建议版本号为 0.1 的黄色 div 应该出现在蓝色 div 之上，但这当然不会发生。是我误解了 MDN 还是我创建了一个反例？
我认为 MDN 中的版本控制方法试图解释的是：
A child can never exceed its parent's z-index.
这意味着子项在其父项之外的 z-index 等于父项的 z-index。
您正在比较 yellow div 和 blue div。这是不正确的。
您应该将 red div 与 blue div 进行比较。
这是因为 red 是 yellow 的父级，在 red 之外，黄色的 z-index 不再重要。
如果你想在上面显示yellow div，那么你必须增加red的z-index，使其超过[=20的z-index =].
在MDN，我上面写的总结如下：
It is important to note that DIV #4, DIV #5 and DIV #6 are children of
DIV #3, so stacking of those elements is completely resolved within
DIV#3. Once stacking and rendering within DIV #3 is completed, the
whole DIV #3 element is passed for stacking in the root element with
respect to its sibling's DIV.
An easy way to figure out the rendering order of stacked elements
along the Z axis is to think of it as a "version number" of sorts,
where child elements are minor version numbers underneath their
parent's major version numbers.
MDN 建议在 Stacking Context 下使用版本号，其中子元素被赋予版本号（例如，如果子元素的 z-index 为 6 并且包含在 z-index 为 4 的父元素中版本号为 4.6）。它使用此方法轻松解释了 z-index 5 的 parent/child 堆栈外部的 div 如何出现在 z-index 6 的子元素上方（因为它的版本号为 4.6）。但是，我在下面构建了一个示例，该示例无法使用此方法。黄色 div（z-index 1）是红色 div（z-index 0）的子项，我输入了蓝色 div，z-index 为 0。 version number 方法建议版本号为 0.1 的黄色 div 应该出现在蓝色 div 之上，但这当然不会发生。是我误解了 MDN 还是我创建了一个反例？
我认为 MDN 中的版本控制方法试图解释的是：
A child can never exceed its parent's z-index.
这意味着子项在其父项之外的 z-index 等于父项的 z-index。
您正在比较 yellow div 和 blue div。这是不正确的。
您应该将 red div 与 blue div 进行比较。
这是因为 red 是 yellow 的父级，在 red 之外，黄色的 z-index 不再重要。
如果你想在上面显示yellow div，那么你必须增加red的z-index，使其超过[=20的z-index =].
在MDN，我上面写的总结如下：
It is important to note that DIV #4, DIV #5 and DIV #6 are children of DIV #3, so stacking of those elements is completely resolved within DIV#3. Once stacking and rendering within DIV #3 is completed, the whole DIV #3 element is passed for stacking in the root element with respect to its sibling's DIV.
An easy way to figure out the rendering order of stacked elements along the Z axis is to think of it as a "version number" of sorts, where child elements are minor version numbers underneath their parent's major version numbers.