如何固定图片上层带数字的圆形span位置，使其在任意分辨率下都不偏移

我目前正在尝试实现一个CSS效果但遇到了问题：我有一个带数字的圆形span元素需要定位在图片上方，全屏状态下显示正常，效果如下：

但在移动设备上布局就会错乱，效果如下：

请问有没有方法可以让这些圆形元素在任意分辨率下都固定在对应位置？我使用的生成代码如下：

<script>
var url = "https://parcelasfrutillar.cl/sug/admin/ci/index.php/admin/ajaxCall";
var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myArr = JSON.parse(this.responseText);
        myFunction(myArr);
    }
};
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i < arr.length; i++) {
        var num = arr[i].numParcels,estado = arr[i].estado, url_pan = arr[i].iframe_panoramico;
        var htmlstr = '';
        var div = document.getElementById( 'buttondiv1' );
        if(estado == 0){
            if(num <=2){
                htmlstr = '<a href="'+url_pan+'" > <span id="botoncss'+num+'" class="step1">'+num+'</span></a>';
                div.insertAdjacentHTML( 'beforeend', htmlstr );
            }
        }
    }
}
</script>

<style>
.planocl{
   max-width: 100%; 
display: block; 
height: auto;
}

.step1 {
    background: green;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #ffffff;
    display: inline-block;
    font-weight: bold;
    line-height: 2vw;
    margin-right: 5px;
    text-align: center;
    width: 2vw;
    font-size: 1vw;
}

#botoncss1 {
    top: 82.44%;
    left: 78.4%;
position: absolute;
}

#botoncss2 {
    top: 77.24%;
    left: 75.3%;
    position: absolute;
}
</style>

• 首先修正DOM结构和父容器定位：当前圆点的绝对定位基准是整个窗口，不是图片，所以窗口尺寸变化时定位就会错位。需要把图片和#buttondiv1放在同一个父容器里，给父容器加position: relative，让圆点的百分比定位以图片的尺寸为基准。示例结构：

<div class="img-wrapper">
  <img src="你的底图地址" class="planocl">
  <div id="buttondiv1"></div>
</div>

对应新增CSS规则：

.img-wrapper {
  position: relative;
  width: fit-content;
  max-width: 100%;
}
#buttondiv1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

• 调整圆点的样式规则：把.step1的宽高、行高从vw单位改成基于父容器的百分比，用aspect-ratio保证始终是正圆，字号可以用clamp限制最小尺寸避免移动端太小看不清，同时简化重复的定位属性：

.step1 {
    background: green;
    border-radius: 50%; /* 直接设50%即可生成正圆，无需固定em值 */
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    width: 2%; /* 相对于父容器宽度的2%，随图片同步缩放 */
    aspect-ratio: 1/1; /* 宽高比1:1，保证任意尺寸下都是正圆 */
    font-size: clamp(8px, 1%, 16px); /* 最小字号8px，最大16px，中间随缩放动态调整 */
}
/* 仅保留每个圆点的位置偏移规则即可 */
#botoncss1 {
    top: 82.44%;
    left: 78.4%;
}
#botoncss2 {
    top: 77.24%;
    left: 75.3%;
}

修改完成后，圆点的位置会始终按比例贴合图片，任意分辨率下都不会错位。

内容的提问来源于stack exchange，提问作者lpz