title: What is the best way to position <div> markers over a base image and allow for resize?
body: <p>I have a underlay.jpg in a <code>&lt;div id=underlay&gt;</code> that I want to precisely place markers on. What is the best way to do this? </p>
  
  <p>I'd like the image to fill the space of the div and markers to adjust when the window is resized. I'm assuming doing it in CSS would be the easiest but I'm not sure. </p>
  
  <p>By the way, I'm generating the markers divs using Javascript. Here is my current code, which doesn't adjust correctly when I resize:</p>
  
  <pre><code>&lt;div id="underlay"&gt;
    &lt;img style="height:auto; width:auto; max-width:100%;" src="underlay.jpg"&gt;
     &lt;div id="markers"&gt;
        &lt;div id="marker1" style="left:36%; top:56%; position:absolute;"&gt;"1"&lt;/div&gt;
        &lt;div id="marker2" style="left:45%; top:76%; position:absolute;"&gt;"2"&lt;/div&gt;
        &lt;div id="marker3" style="left:24%; top:65%; position:absolute;"&gt;"3"&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>