以下是代码：
<html>
<head>
<style>
.dad {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: greenyellow;
width: 100px;
height: 100px;
z-index: 2;
}
.dad::after {
content: '';
position: absolute;
bottom: -10px;
left: 10px;
width: 20px;
height: 20px;
background: tomato;
z-index: -1;
}
</style>
</head>
<body>
<div class="dad">
</div>
</body>
</html>我想强迫那个小番茄方块在绿色方块下面(这样只有番茄方块的下半部分仍然可见(，我该如何让它发挥作用？我搜索并阅读了发生这种情况的可能原因，我尝试了许多修复方法，但都没有成功(还有一些问题和答案过于混乱和神秘(。提前谢谢。
如果从.dad中删除变换和z索引，则红色方块将位于绿色方块下方。