title: Positioning figure over image issue
body: <p>Hi guys im trying to do this on css but i cant  (im not css expert)
  i have a span with a circle and number positioned over an image, on fullscreen works fine looks like this</p>
  <p><a href="https://i.stack.imgur.com/RRCeG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RRCeG.png" alt="not mobile fullscreen" /></a></p>
  <p>But on mobile device is disconfigured</p>
  <p><a href="https://i.stack.imgur.com/biCl5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/biCl5.png" alt="javascript" /></a></p>
  <p>is there anyway to keep the circles fixed in any resolution??  the code im used to generate is this</p>
  <pre><code>    &lt;script&gt;
      
      var url = &quot;https://parcelasfrutillar.cl/sug/admin/ci/index.php/admin/ajaxCall&quot;;
      var xmlhttp = new XMLHttpRequest();
      
      
      xmlhttp.onreadystatechange = function() {
          if (this.readyState == 4 &amp;&amp; this.status == 200) {
              var myArr = JSON.parse(this.responseText);
              myFunction(myArr);
          }
      };
      xmlhttp.open(&quot;GET&quot;, url, true);
      xmlhttp.send();
      
      function myFunction(arr) {
          var out = &quot;&quot;;
          var i;
          
          for(i = 0; i &lt; 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 &lt;=2){
                          htmlstr = '&lt;a href=&quot;'+url_pan+'&quot; &gt; &lt;span id=&quot;botoncss'+num+'&quot; class=&quot;step1&quot;&gt;'+num+'&lt;/span&gt;&lt;/a&gt;';                    
                          div.insertAdjacentHTML( 'beforeend', htmlstr );
                          
                      }
                  }
              }
         
      }
      &lt;/script&gt;
  
  
  &lt;style&gt;
  .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;
  }
  </code></pre>