Html 需要解释z指数行为吗

我的CSS代码有两个正方形，绿色（小，子）和红色（大，父）。我想把小盒子的下半部分隐藏在大盒子下面，这样就看不到重叠

我下面的代码不起作用，但是如果我删除红色框上的z-index，它就会起作用

我不能理解这种行为。根据我的理解，无论父对象上的z索引是什么，子对象上的任何-ve z索引都将使其低于父对象。 不对吗

.parent{
背景：红色；
高度：100px；
宽度：100px；
位置：绝对位置；
z-index:1；/*注释此行以使其正常工作*/
}
.孩子{
高度：10px；
宽度：10px；
位置：绝对位置；
背景：绿色；
最高：0%；
左：50%；
转化：translateY（-50%）；
z指数：-1；
}

---

通过给父元素一个自己的

z-index

，您可以建立一个新的索引

---

这会导致子元素的

z-index

的作用域位于父元素内部，而不是html元素。

通过给父元素一个自己的

z-index

，您可以建立一个新的子元素

这会导致子元素的

z-index

作用域位于父元素内部，而不是html元素