在响应中的循环内覆盖图像上方的文本

Question

如何在反应中循环内循环图像上的文本？ 到目前为止，只有我能做到。 有没有办法将文本定位在图像上方？

这只是我的代码片段

<div className="images">
  {/* looped over images to render */}
  {images.map((img, i) => (
    <>
      <img
        title={img.text}
        className="images__image"
        src={img.image}
        key={i}
        alt={img.text}
      />
      <p className="images__text">{img.text}</p>
    </>
  ))}
</div> 
 //scss
    .images {
    display: flex;
    justify-items: center;
    flex-wrap: wrap;
    justify-content: center;

    &__image {
        border-radius: 20px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
        margin: 10px;
        padding: 20px;
        min-width: 50%;
        min-height: 50%;
        height: 80%;
        width: 80%;
    }
}

Answer 1

如果您希望<p></p>部分出现在<img>部分上方，那么您可以将两者都包含在这样的 div 中<div> <img><p></p> </div> ，然后添加position: abosolute <p>标签的position: abosolute样式

编辑：我刚刚测试了这个，发现段落<p>标签需要在img标签之前才能正常工作。 即<div> <p></p><img> </div>