HTML与CSS中如何避免3个卡片重叠？底部定位卡片重叠问题排查

问题原因 #

你代码里的卡片重叠核心是.card设置了position: absolute，绝对定位元素会脱离正常文档流，父级.row的flex布局对脱离流的元素不生效，三个卡片都统一设置了bottom:10px，相当于都堆叠在同一个底部位置，自然会重叠。

修复方案 #

按以下步骤修改代码即可：

1. 给父容器.row添加固定到底部的定位属性，删除没用的清除浮动代码（这是浮动布局才需要的，flex布局用不上）
2. 移除.card里的绝对定位、底部对齐、左右边距属性，让卡片回到flex的正常布局流里

修改后的CSS代码 #

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.144);
  transition: 0.3s;
  border-radius: 13px;
  width: 320px;
  height: 455px;
  cursor: pointer;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.397);
}

.container {
  padding: 2px 16px;
  font-family: 'Rubik', sans-serif;
  cursor: pointer;
}

.row {
  display: flex;
  position: absolute;
  bottom: 10px;
  width: 100%;
  justify-content: space-evenly;
  gap: 16px;
  box-sizing: border-box;
  padding: 0 4%;
}

HTML代码不需要做任何修改，保持原有结构就可以正常显示三个并排、固定在底部的卡片。如果需要适配小屏幕，可以给.row额外加flex-wrap: wrap属性，屏幕宽度不够时卡片会自动换行，不会挤压变形。

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