新手程序员求助：如何将文本叠加显示在图片上方？

要实现文字叠加在图片顶部居中偏下的效果，核心是通过CSS定位调整元素布局，同时修改HTML结构让文字和图片处于同一个父容器中。以下是具体修改步骤：

1. 调整HTML结构 #

把文字和图片的div放到同一个父容器内，这样才能基于父容器进行定位：

<div class="btn-group">
  <button onclick="shufflecards()">RESET</button>
  <button onclick="drawcards()">SELECT CARDS</button>
</div>
<!-- 添加父容器包裹文字和图片 -->
<div class="card-container">
  <div id="selected_word"></div>
  <div id="selected_image"></div>
</div>

2. 添加CSS定位样式 #

通过相对+绝对定位实现叠加，同时调整文字位置和可读性：

/* 父容器设置相对定位，作为内部绝对定位元素的基准 */
.card-container {
  position: relative;
  display: inline-block; /* 容器宽度自适应图片宽度 */
}

/* 确保图片填满容器，去掉底部空隙 */
#selected_image img {
  display: block;
  width: 100%;
  height: auto;
}

/* 文字绝对定位到顶部居中偏下的位置 */
#selected_word {
  position: absolute;
  top: 25%; /* 可根据需求调整这个百分比，控制垂直位置 */
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
  color: #fff; /* 白色文字，避免和图片混淆 */
  font-size: 24px;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.7); /* 文字阴影增强可读性 */
  z-index: 10; /* 确保文字在图片上方 */
}

3. 确认JavaScript中图片的格式 #

确保你的images数组里存储的是完整的<img>标签，比如：

// 示例images数组结构
const images = [
  '<img src="image-1.jpg" alt="卡片1">',
  '<img src="image-2.jpg" alt="卡片2">',
  // ...更多图片项
];

原理说明 #

原来的代码中，selected_word和selected_image是两个独立的块级元素，默认上下排列。通过将它们放入相对定位的父容器，再给文字div设置绝对定位，就能脱离文档流叠加在图片上方，通过top、left和transform精准控制位置。

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