Html 如何将引导翻转卡的背面定位在与正面相同的位置？

我需要一些关于引导翻转卡的帮助。 我试图创建一个引导翻转卡，但我不知道如何使背面与正面处于相同的位置。谁能帮帮我吗

.card flip>div{
背面可见性：隐藏；
转换：转换300ms；
过渡时间函数：线性；
宽度：100%；
身高：100%；
/*保证金：0*/
/*显示器：flex*/
}
.卡正面{
变换：旋转（0度）；
}
.退卡{
变换：旋转（180度）；
位置：相对位置；
排名：0；
}
.卡片翻转：悬停。卡片正面{
变换：旋转（-180度）；
}
.卡片翻转：悬停。卡片返回{
变换：旋转（0度）；
}

标题
正面
返回
页脚

将

卡背面的
位置：相对
更改为
位置：绝对
，因此它将粘在
卡正面的顶部


.card flip{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
位置：相对位置；
}
.card flip>div{
背面可见性：隐藏；
转换：转换300ms；
过渡时间函数：线性；
/*保证金：0*/
/*显示器：flex*/
}
.卡正面{
变换：旋转（0度）；
}
.退卡{
变换：旋转（180度）；
位置：绝对位置；
排名：0；
}
.卡片翻转：悬停。卡片正面{
变换：旋转（-180度）；
}
.卡片翻转：悬停。卡片返回{
变换：旋转（0度）；
}

标题
正面
返回
页脚
这不会解决问题。后面的卡片在前面的卡片下面：（现在卡片是关于彼此的：（你是什么意思？我不明白，我在代码段上测试了它，它成功了。现在检查代码段。它像一个符咒一样工作。）