Css z索引即使在绝对定位下也不起作用

我试图创建一条鱼，它的背痕不会在它的身体后面，即使我使用了正确设置的z索引属性。这个怎么了？我知道我只能对定位元素使用z索引。另一个可能影响属性行为的因素是什么

.fish{
保证金：自动；
显示：块；
利润率最高：5%；
宽度：300px；
高度：300px；
}
.鱼体{
位置：相对位置；
最高：40%；
左：23.5%；
背景：黑色；
宽度：53%；
身高：45%；
边界半径：10%150%2%150%；
变换：旋转（142度）；
}
.回火顶部{
位置：绝对位置；
最高：88%；
左：56%；
背景：黄色；
宽度：53%；
身高：45%；
变换：旋转（85度）；
边界半径：0%50%400%10%；
z指数：-1；
}
.回填底部{
位置：绝对位置；
底部：0%；
右图：-34%；
背景：黄色；
宽度：53%；
身高：45%；
边界半径：10%400%10%50%；
z指数：-1；
}

这是我的解决方案

基本上，我必须改变你的html结构。检查下面的代码片段

这是必需的，因为首先

 <div class="backfin-top"></div>
 <div class="backfin-bottom"></div>

---

索引在您的情况下不起作用，因为我们无法覆盖父div的z索引。如果我们想使用z索引，那么所有元素都应该是同一父的子元素，我们也应该使用position。请看下面的代码和输出

.fish{
保证金：自动；
显示：块；
利润率最高：5%；
宽度：300px；
高度：300px；
位置：相对位置；
}
.鱼体{
位置：相对位置；
最高：40%；
左：23.5%；
背景：黑色；
宽度：53%；
身高：45%；
边界半径：10%150%2%150%；
变换：旋转（142度）；
}
.回火顶部{
位置：绝对位置；
最高：45%；
左：0；
背景：黄色；
宽度：40%；
身高：25%；
变换：旋转（225度）；
边界半径：050%400%10%；
z指数：-1；
}
.回填底部{
左：0；
位置：绝对位置；
底部：46px；
背景：黄色；
宽度：40%；
身高：25%；
边界半径：10%400%10%50%；
z指数：-1；
变换：旋转（135度）；
}

示例不起作用的实际原因与堆叠上下文有关。你可以在这里阅读更多信息：-正如下面的答案所做的那样，只需将你的

鱼体

作为自己的div，而不是两个鳍的父体，如果我删除了变换：旋转（142度）；从鱼体类别来看，z指数：-1实际上起作用。有人能解释一下原因吗？我明白了，我看到了，谢谢！尽管如此，我还是不太明白为什么freecodecamp网站上的这个例子：与我用来创建我的鱼的相同结构可以很好地工作？谢谢！我对此做了一点修改，并意识到只要从.fish body中删除transform属性并在.fish类中声明它，它就可以工作，而不会实际更改堆栈顺序。你知道为什么吗？谢谢你我不知道transform property能做这样的事情：）