title: Position icons with x and y coordinates on top of another image using JQuery
body: <p>I have an image, and I want to place an icon on top of it. The icon has x and y coordinates with respect to the big image. How can I position them on top of it using jQuery and CSS? I want to append the icon to the image because I have a lopp of many icons and I want to add them dynamically.</p>
  
  <p>This is the HTML: </p>
  
  <pre><code>&lt;div class="panel-body" id="image-class"&gt;
      &lt;img id="map-view" src="/image1.png"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the CSS:</p>
  
  <pre><code>#map-view {
      height: 100%; 
      width: 100%; 
      object-fit: contain; 
  }
  </code></pre>
  
  <p>Thank you in advance.</p>