使用CSS position属性无法在图片上叠加文本的问题求助

我正在开发一个作品集网站，尝试在图片上方叠加文本。已将图片容器设置为position: relative，文本设置为position: absolute，但效果未达预期。

现有代码 #

CSS代码 #

.projet-indiv {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
  margin-bottom: 60px;
}

.texte-projet {
  position: absolute;
  z-index: 15;
}

.images-projet {
  position: relative;
  width: 50%;
}

HTML代码 #

<div class="images-projet">
  <img src="https://placekitten.com/300/230" style="height: 230px; width: 300px;">
  <div class="texte_projet">
    <p>Projet</p>
  </div>
  <p>🔗 Dataviz</p>
</div>

问题分析 #

1. 类名拼写不一致：CSS中定义的类是.texte-projet（连字符），但HTML里文本容器用的是texte_projet（下划线），导致定位样式完全没有应用到文本元素上。
2. 缺少定位坐标：即使样式生效，未设置top/left等属性的绝对定位元素，默认会停留在文档流中的原始位置，无法精准叠加在图片上方。

修复方案 #

修复后的CSS代码 #

.projet-indiv {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
  margin-bottom: 60px;
}

.texte-projet {
  position: absolute;
  z-index: 15;
  /* 让文本居中叠加在图片上 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 增强文本可读性的可选样式 */
  color: #fff;
  font-weight: bold;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}

.images-projet {
  position: relative;
  width: 50%;
}

修复后的HTML代码 #

<div class="images-projet">
  <img src="https://placekitten.com/300/230" style="height: 230px; width: 300px;">
  <div class="texte-projet">
    <p>Projet</p>
  </div>
  <p>🔗 Dataviz</p>
</div>

关键说明 #

• 修正类名拼写后，文本容器的绝对定位样式会生效，依托相对定位的.images-projet容器进行定位。
• 使用top:50%+left:50%+transform:translate(-50%,-50%)是实现元素居中的通用方案，也可根据需求调整top/left的数值（比如top:10px; left:10px让文本固定在左上角）。
• 添加文本阴影和白色字体是为了避免文本与图片背景融合，可根据图片的实际色调调整样式参数。

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