来自MDN的z-index的'版本号'方法不起作用？

Question

[MDN建议在Stacking Context下使用版本号，其中给子元素一个版本号（例如，如果子元素的z-index为6，并且包含在父元素中的z-index为4，则其版本号为4.6） ）。它使用此方法来轻松说明z-index 5的父/子堆栈外部的div如何出现在z-index 6的子元素上方（因为它的版本号为4.6）。但是，我在下面构造了一个无法使用此方法的示例。黄色的div（z索引1）是红色的div（z索引0）的子级，我输入的蓝色div的z-index为0。版本号方法建议黄色的div的版本号为0.1应该出现在蓝色div上方，但这当然不会发生。我误解了MDN还是创建了反例？

Answer 1

我认为MDN中的版本控制方法试图解释的是：

孩子永远不能超过其父母的z-index。

这意味着孩子在父级之外的z索引等于父级的z索引。

您正在比较yellow div和blue div。这是不正确的。

您应该将red div与blue div进行比较。

这是因为red是yellow的父级，并且在red之外，黄色的z索引不再重要。

如果要在上方显示yellow div，则必须增加red的z索引，使其超过blue的z索引。

在MDN，我上面写的内容总结如下：

请注意，DIV＃4，DIV＃5和DIV＃6是DIV＃3，因此在内部完全解决了这些元素的堆叠问题DIV＃3。在DIV＃3中完成堆叠和渲染后，传递整个DIV＃3元素以将其与根元素堆叠在一起尊重其兄弟的DIV。