html - 子元素的 z-index 是父元素的本地元素吗？

Question

好的，我的 html 中有这个测试设置

<div style="position:absolute;left:0px;top:0px;z-index:1;width:200px;height:200px;background-color:red;">
<div style="position:absolute;left:0px;top:0px;z-index:3;width:50px;height:50px;background-color:green;"></div>
</div>

<div style="position:absolute;left:0px;top:0px;z-index:2;width:100px;height:100px;background-color:blue"></div>

我希望蓝色 div 在红色 div 前面呈现，但我希望红色的子 div(绿色)在蓝色前面呈现，查看该代码似乎如果 z-index 应该可以工作是全局的，但它似乎是父元素的本地元素，因为蓝色呈现在红色上方，但绿色不会呈现在顶部，除非我将绿色 div 向上移出父元素？我如何使用“全局 z-indexes”或其他任何东西。它以这种方式工作对我的实际元素至关重要

Answer 1

Z 索引始终是局部的，或相对于位置最近的祖先(在本例中为父级)。 CSS 中没有全局 z-index 属性。

您必须将绿色 div 移出其父级。