title: CSS Dot overlay on image with bootstrap framework
body: <p>I have a "map" that's basically just a line in .png format (attached an example image). I am using a red dot in css that I want to overlay on the map. I use javascript to change the positioning of the dot based on a function.</p>
  
  <p>My problem is that I can't figure out how to make the dot compatible with bootstrap. Such as when the browser size is changed, the map and dot move together. </p>
  
  <p>The dot will be moving along the line based on a percentage that is calculated using a JS function so if the function outputs 10%, the red dot will be placed at 10% of the blue line. </p>
  
  <p><a href="https://i.stack.imgur.com/VjwsQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VjwsQ.png" alt="enter image description here"></a></p>
  
  <pre><code>.reddot {
      height: 25px;
      width: 25px;
      background-color: #D03C3C;
      border-radius: 50%;
      display: inline-block;
      position: absolute;
      top: 300px;
      left: 300px;
  }
  
  &lt;div style="position: relative; left: 0; top: 0;"&gt;
        &lt;img src="/imgs/map.png" alt="Map" style="width:100%;"&gt;
        &lt;div class="reddot"&gt;
        &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>