使用引导框架在图像上覆盖CSS点

Question

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.

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.

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.

.reddot {
    height: 25px;
    width: 25px;
    background-color: #D03C3C;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    top: 300px;
    left: 300px;
}

<div style="position: relative; left: 0; top: 0;">
      <img src="/imgs/map.png" alt="Map" style="width:100%;">
      <div class="reddot">
      </div>
</div>

Answer 1

use vw instead of px when sizing and positioning

 .reddot { height: 4vw; width: 4vw; background-color: #D03C3C; border-radius: 50%; display: inline-block; position: absolute; top: 20vw; left: 20vw; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="position: relative; left: 0; top: 0;"> <img src="https://i.stack.imgur.com/VjwsQ.png" alt="Map" class="img-fluid" style="width:100%;"> <div class="reddot"> </div> </div>