在图像问题上定位图形答案

【问题标题】：Positioning figure over image issue在图像问题上定位图形
【发布时间】：2021-10-30 08:35:57
【问题描述】：

大家好，我正在尝试在 css 上执行此操作，但我不能（我不是 css 专家）我有一个圆圈和数字位于图像上的跨度，在全屏上工作正常看起来像这样

但在移动设备上被取消配置

有没有办法让圆圈保持在任何分辨率下？我用来生成的代码是这样的

    <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;
}

【问题讨论】：

尝试使用 vh 和 vw 代替 %
您不能为此使用任何绝对单位，也不能使用由窗口大小设置的单位，因为纵横比可以是任何东西。必须相对于图像进行定位。请向我们展示您的 HTML。
谢谢，我将一个 div 容器放在相对位置，并将 div 内的跨度作为绝对位置并且可以正常工作

标签： javascript html css responsive-design

【解决方案1】：

使用媒体查询根据屏幕宽度或高度调整.step1类的位置。

/* the css code above */
@media (max-width: 400px) {
  .step1 {
    margin-right: 10px; /* ... I'm assuming you write multiple positioning attributes */
  }
}

如果媒体查询不能解决问题，能否提供您部署应用的链接？

【讨论】：