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

【问题标题】：How to put text in front of an image while still being responsive?如何在仍然响应的同时将文本放在图像前面？
【发布时间】：2018-06-14 02:10:27
【问题描述】：

我正在尝试在图片前面添加评级文字。我通过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>

【问题讨论】：

尝试将position:relative添加到容器中，这将使评级根据容器占据位置
完成了这项工作，非常感谢！

标签： html css responsive absolute

【解决方案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>

【讨论】：