如何克服html元素的重叠？

我正在练习制作上面的图。任何人都可以在这方面帮助我，如何克服这种重叠，我认为

z-index

可以解决这类问题，但我不知道如何解决

但到现在为止，我能做出这个数字

这是我的密码：

*{
保证金：0；
背景：#222730；
}
.a{
最大宽度：100%；
高度：150像素；
边缘顶部：4.69em；
背景#4CAAB3；
}
.b{
宽度：250px；
高度：250px；
保证金顶部：-12.5em；
变换：旋转（45度）；
左边距：自动；
右边距：自动；
背景：#222730；
}
c{
宽度：150px；
高度：150像素；
保证金顶部：-12.5em；
变换：旋转（45度）；
左边距：自动；
右边距：自动；
背景#4CAAB3；
}
博士{
背景：白色；
左边距：自动；
右边距：自动；
宽度：50px；
高度：50px；
z指数：；
边缘顶部：-8em；
}

---

如果点是

div.d

，则只需添加

位置：相对以在上面显示它（以及其他样式，如背景、边框半径等）


*{
保证金：0；
背景：#222730；
}
.a{
最大宽度：100%；
高度：150像素；
边缘顶部：4.69em；
背景#4CAAB3；
}
.b{
宽度：250px；
高度：250px；
保证金顶部：-12.5em；
变换：旋转（45度）；
左边距：自动；
右边距：自动；
背景：#222730；
}
c{
宽度：150px；
高度：150像素；
保证金顶部：-12.5em；
变换：旋转（45度）；
左边距：自动；
右边距：自动；
背景#4CAAB3；
}
博士{
背景：白色；
左边距：自动；
右边距：自动；
宽度：50px；
高度：50px；
z指数：；
边缘顶部：-8em；
位置：相对位置；
}

对于要工作的
z-index
，位置不能是
静态的
。z-index的默认值不是1（也不是0）。是自动的，是我的错。。。在我的文章的其余部分，它没有改变任何东西，在OP CSS中没有指定z索引，所有元素都有默认值（无论是auto还是1）。但是谢谢。