如何实现文字在div元素上方叠加显示的效果？

方案1：相对+绝对定位（兼容性最优，全场景适用） #

这是最通用的实现方式，支持所有主流浏览器，也不需要依赖新CSS特性：

• 给作为容器的父div设置position: relative，作为内部绝对定位元素的位置参照
• 给需要叠加的文字元素设置position: absolute，通过top/right/bottom/left属性调整文字在容器内的位置
• 必要时设置z-index确保文字层级高于容器内其他内容

示例代码：

<div class="game-block">
  <!-- 容器内原有内容，比如游戏背景、画布、图片等 -->
  <canvas width="300" height="200"></canvas>
  <!-- 叠加的文字 -->
  <span class="block-text">当前积分：1200</span>
</div>

.game-block {
  position: relative;
  width: 300px;
  height: 200px;
}

.block-text {
  position: absolute;
  /* 顶部居中定位示例，要放在左上角改成top: 8px; left: 8px即可 */
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  /* 文字样式可按需修改 */
  color: #ffffff;
  font-size: 18px;
  background: rgba(0, 0, 0, 0.7);
  padding: 3px 6px;
  border-radius: 3px;
  /* 如果需要文字不阻挡底层点击事件，加下面这行 */
  pointer-events: none;
}

方案2：Grid堆叠（写法更简洁，现代浏览器适配） #

如果不需要兼容IE等老旧浏览器，用CSS Grid实现代码更短，不需要手动写定位属性：

<div class="game-block">
  <canvas width="300" height="200"></canvas>
  <span class="block-text">当前积分：1200</span>
</div>

.game-block {
  display: grid;
  width: 300px;
  height: 200px;
}
/* 所有子元素共用同一个网格区域，默认后面的元素层级更高 */
.game-block > * {
  grid-area: 1 / 1 / -1 / -1;
}
.block-text {
  /* 直接用Grid对齐属性控制位置，这里是顶部居中 */
  justify-self: center;
  align-self: start;
  margin-top: 8px;
  /* 其余文字样式和方案1一致即可 */
  color: #ffffff;
  font-size: 18px;
}

内容的提问来源于stack exchange，提问作者J. programming