title: How to absolutely position shape elements relative to an underlying image?
body: <p>The page has a centered image -- a map -- and I need to figure out how to mark points of interest on that map with small dots.</p>
  
  <p>My plan is to draw the dots with very small circle elements, but how can I position them so that they will sit in the same place on the map every time the webpage is loaded on different sized screens? I would just photoshop the dots onto the image if I could, but I will need to write the javascript to have the dots be interactive (show a text box description on mouseover) so that won't work.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt; &lt;meta charset="UTF-8"&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;link rel="stylesheet" href="example.css" /&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;img src="example.jpg" style="margin-left:auto;margin-right:auto;"&gt;&lt;/img&gt;
      &lt;/body&gt;
  </code></pre>