不行，显示不出来，还是被图片挤下去了

抱歉，我之前的回答有误。如果图片的宽度设置为100%，可以尝试使用flex布局来实现文字显示在图片上方。请将以下代码添加到样式表中：

.parent {
  display: flex;
  flex-wrap: wrap;
}

.card {
  flex: 0 0 33.3333%; /* 调整卡片的宽度，根据需要修改 */
  position: relative;
}

.card-image {
  width: 100%;
  position: relative;
}

.card-image::before {
  content: "";
  display: block;
  padding-top: 100%; /* 设置一个占位元素，高度与宽度比例相同 */
}

.card-image > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

这将创建一个相对定位的卡片容器和图片容器，并使用伪元素创建一个占位元素，使得图片容器有一个与宽度相同的高度。然后，将文字区域绝对定位到图片容器的顶部。这样就可以实现文字显示在图片的上方了。