这里是代码：
<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>我想强迫那个小的番茄方块进入绿色方块的下方（这样就只能看到番茄方块的下半部分），如何使它起作用？我已经搜索并了解了发生这种情况的可能原因，并且尝试了许多未成功的修复程序（也有些问题和答案过于混乱和晦涩难懂）。预先感谢。
在这种情况下，z-index无法正常工作，您可以尝试另一种解决方案：
.dad::after {
content: '';
position: absolute;
bottom: -10px;
left: 10px;
width: 20px;
height: 10px; //make this 10px
background: tomato;
z-index: -1;
}
通过执行此操作，将创建一个位于绿色框中的效果。
让我知道它是否对您有用
如果从.dad中删除变换和z-index，则红色方块将在绿色方块下方。