CSS中relative与absolute定位未按预期生效，记忆配对游戏卡片背面无法覆盖正面

问题原因 #

你有两个核心配置遗漏/错误：

1. JS代码中给卡片元素加类名的属性拼写错误，导致.card的样式完全未生效：你写的是card.classlist = "card"，正确语法是classList，首字母L必须大写。所以生成的卡片div没有card类，position: relative配置根本没挂载到卡片元素上，内部子元素的绝对定位找不到相对定位的父容器，自然布局错乱。
2. 你没有给.card类设置宽高，就算相对定位生效，内部子元素设置的width: 100%、height: 100%也没有尺寸参照，无法撑满网格单元格。

修复步骤 #

1. 替换JS代码中的错误写法：
   把card.classlist = "card"修改为card.classList = "card"
2. 修改CSS的.card配置，补全宽高属性：

.card {
  position: relative;
  width: 100%;
  height: 100%;
}

3. （可选，避免堆叠顺序异常）给.back添加z-index属性，确保绿色背面始终叠在封面上层：

.back {
  background: green;
  z-index: 1;
}

修改完成后刷新页面就能看到所有卡片都显示绿色背面的预期效果了。

内容的提问来源于stack exchange，提问作者Tom Lee