Html 如何相对于图像定位文本？

我想我的文字定位相对于图像时，它的大小不同的断点，但我不知道如何做到这一点

我想我的文字是相对于背景的位置，这样当我调整大小时，它总是粘在图像上

这是我正在使用的HTML代码：

<section id="background1">
    <!--Section to display content-->
    <section id="content">
        <figure><img class="img-fluid" src="../Others/wolf-wolves-snow-wolf-landscape-89773.jpeg" onclick="openModal()" class="hover-shadow"></figure>
        <!--Display content-->
        <p class="small">Sustainability</p>
        <p class="big">Starts with<br> You</p>
        <a href="../Website/about.html">Learn more!</a>
    </section>
</section>  

---

定位完成。将任何样式应用于所需的按钮/文本（

颜色

，

字体系列

，等等）

#内容{
位置：相对位置；
}
.内容{
位置：绝对位置；
左：50%；
底部：16px；
转化：translateX（-50%）；
文本对齐：居中；
}
#内容图img{
宽度：100%；
}

可持续性

从你开始

试试这个

例子
.盒子{
位置：相对位置；
显示：内联块；/*使框的宽度与图像相同*/
}
.box.text{
位置：绝对位置；
z指数：999；
保证金：0自动；
左：0；
右：0；
文本对齐：居中；
顶部：40%；/*调整此值以上下移动定位的div*/
背景：rgba（0,0,0,0.8）；
字体系列：Arial，无衬线；
颜色：#fff；
宽度：60%；/*设置定位div的宽度*/
}
例子

不太清楚您希望文本如何重新定位。。。图片下方、上方、侧面？我添加了一个图片，显示它相对于顶部背景图片的外观

@charset "UTF-8";

/*default*/
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#background1 {
  height: 600px;
  background-color: #d3d3d3;
}

#content figure img {
  position: relative;
  width: 100%;
  color: white;
}

#content .small {
  position: absolute;
  top: 45%;
  left: 49%;
  display: block;
  text-align: center;
  font-family: "EB Garamond", serif;
  font-size: 2vw;
  color: rgb(37, 37, 37);
  transform: translate(-50%, -50%);
}

.big {
  position: absolute;
  top: 65%;
  left: 49%;
  display: block;
  text-align: center;
  font-size: 5vw;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #fff;
  transform: translate(-50%, -50%);
}

#content a {
  position: absolute;
  top: 90%;
  left: 49%;
  display: block;
  padding: 5px;
  border: 3px solid #2d1c8a;
  border-radius: 80px;
  text-align: center;
  font-size: 2vw;
  text-decoration: none;
  font-size: 20px;
  color: rgb(255, 255, 255);
  background-color: #1e3094;
  font-family: "Montserrat", sans-serif;
  transform: translate(-50%, -50%);
}