如何在仍然有响应的同时将文本放在图像前面？

Question

我正在尝试在图片前放置评级文字。我是通过z-index和position: absolute完成此操作的。但是，此文本应始终位于照片的该位置，现在它具有静态位置。该文本是标题的评级编号。应该是这样的。我该如何实现这一目标？

.rating{
  color: white;
  font-family: 'Abril Fatface', cursive;
  font-size: 3.5rem;
  z-index: 1;
  margin-top: 5rem;
}

.rating-lant{
  position: absolute;
  right: 63rem;
  top: 37rem;
}

.img-title-activity{
  margin-left: 10rem;
  z-index: 0;
}

<div class="container">
      <p class="rating rating-lant">7.5</p>
      <img src="./assets/img/Lantaarnopsteker-title@288x.png" alt="Lantaarnopsteker" width="584" height="264" class="img-title-activity">
</div>

Answer 1

为图像和标题文本创建一个容器div，并将容器div的位置设置为relative。通过将给定边距设置为50％，它将把它带到图像的中心。

这是我为你做的一个例子 https://codepen.io/harsimarriar96/pen/WyOgVb

CSS

.image-with-text {
  position: relative;
  width: 800px;
}

h1 {
  position: absolute;
  text-align: center;
  top: 50%;
  width: 100%;
  color: #000;
  margin: 0 auto;
}

HTML

<div class="image-with-text">
  <h1>Text on image</h1>
  <img src="http://placehold.it/800x800" />
</div>