MDN 中的 z-index 的“版本号”方法不起作用？

Question

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

Answer 1

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

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

这意味着子级在其父级之外的 z-index 等于父级的 z-index。

您正在yellow div与进行比较blue div。这是不正确的。

你应该red div与进行比较blue div。

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

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

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

需要注意的是，DIV #4、DIV #5 和 DIV #6 是 DIV #3 的子级，因此这些元素的堆叠在 DIV#3 中完全解决。一旦 DIV #3 内的堆叠和呈现完成，整个 DIV #3 元素将被传递以相对于其同级 DIV 堆叠在根元素中。

计算沿 Z 轴堆叠元素的渲染顺序的一种简单方法是将其视为某种“版本号”，其中子元素是其父元素主版本号下方的次版本号。