如何在保持响应的同时将文本放在图像前面？

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设置为相对。通过设置 margin top 为 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>

如何在保持响应的同时将文本放在图像前面？

How to put text in front of an image while still being responsive?

html

css

absolute

responsive