我目前正在用webflow构建一个网站，但遇到了一个问题，这里的人可能会帮我解决。这是我在多个项目中遇到的问题，所以我真的很感谢有人的帮助。
基本上，如果你有一个全屏大小的图像(设置为背景图像，100vw和100vh(，然后想在该图像的顶部放置指向该图像中特定部分的标题/标签，当有人调整浏览器大小时，我如何使这些标题/标签始终随图像移动？
到目前为止，我对标题/标签使用了绝对定位，并使用%边距将它们定位在我希望它们在图像上指向的位置。我已经将图像本身设置为相对位置。然而，使用该解决方案，在调整浏览器大小时，标题/标签永远不会完全继续指向图像上的同一点。
我认为主要的问题是，当有人只改变浏览器的宽度时，图像会变得(例如(更小，因为它保持了它的比例。在垂直方向上，标题/标签不会移动，因为高度没有变化，只是浏览器的宽度发生了变化。因此，在水平方向上仍然可以，但在垂直方向上，由于调整了浏览器的宽度，图像变得更小，标题现在被关闭了。所以我想我知道为什么它不起作用，但我不知道如何解决这个问题。如果有人对此有解决方案，请告诉我。
例如：如果打开此页面：http://nestin.bold-themes.com/classy/并向下滚动到"真值始终在内部"部分，有一个带有5个编号标签的图像，无论您如何调整浏览器大小，这些标签/数字都会保持在图像的同一位置。我经常在网站上看到这种情况。这是如何实现的？
非常感谢您的帮助！
创建一个父包装，放入图像和所有div中。父对象是相关的，div是绝对的。
这里有一个小演示。
* {
box-sizing: border-box;
margin: 0;
}
img {
max-width: 100%;
display: block;
width: 100%;
}
.parent {
position: relative;
}
.parent .box {
position: absolute;
width: calc(1.6vw + 10px); height: calc(1.6vw + 10px);
border-radius: 50%;
background-color: #fff;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
}
.parent .box.window {
top: 0;
left: 39%;
}
.parent .box.light {
top: 16%;
left: 46%;
}
.parent .box.pool {
top: 90%;
left: 50%;
}
.parent .box.plant {
top: 55%;
left: 3%;
}<div class="parent">
<div class="box plant">1</div>
<div class="box window">2</div>
<div class="box light">3</div>
<div class="box pool">4</div><img src="https://images.pexels.com/photos/4075088/pexels-photo-4075088.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt=""/>
</div>https://codepen.io/ShadiMouma/pen/BaKYyYX?editors=1100
您可以通过百分比定位来实现这一点。例如，
在父div 中
position: relative;
在子div 中
position: absolute;
top: 50%;
left: 30%;
现在，子div总是将自己定位在父div顶部50%和左侧30%的位置。父div的大小无关紧要。我建议你取一个父div，并将图像和文本放在里面。
您的示例网站也使用此技术。在这里检查他们的代码
另一种技术是使用HTML画布。但对于像这样简单的东西，HTML画布就显得有些过头了。