【发布时间】：2020-07-02 20:16:03
【问题描述】：
代码如下：
<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>我想强迫那个小番茄方块进入绿色方块下方（这样只有番茄方块的下半部分仍然可见），我怎样才能让它工作？我已经搜索并阅读了发生这种情况的可能原因，并且我尝试了许多修复但没有成功（还有一些问题和答案太混乱和神秘）。提前致谢。
【问题讨论】：
-
你能编辑一张你想要的图片吗？
-
@anantvikramSingh 我希望红色方块的上半部分位于绿色方块下方，这样只有它的下半部分可见。还需要图片吗？
-
你需要那个橙色的盒子来做某事还是它总是在绿色盒子下面？
-
@anantvikramSingh 我不太清楚你的意思，你能说清楚一点吗？但我会尝试根据我猜你想知道的来回答它。我的最终目标是旋转（45 度）那个较小的正方形，并赋予它与较大正方形相同的颜色，这样它就好像它真的是较大正方形的一部分。它不会做任何比这更特别的事情。
标签： css z-index pseudo-element