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

我有一张“地图”，它基本上只是一行.png格式的文字（附上一张示例图片）。我在css中使用了一个我想覆盖在地图上的红点。我使用javascript根据函数更改点的位置

我的问题是，我不知道如何使点与引导兼容。例如，更改浏览器大小时，贴图和点会一起移动

点将根据使用JS函数计算的百分比沿直线移动，因此如果函数输出10%，则红点将位于蓝线的10%

.reddot{
高度：25px；
宽度：25px；
背景色：#D03C；
边界半径：50%；
显示：内联块；
位置：绝对位置；
顶部：300px；
左：300px；
}

在调整尺寸和定位时，使用

vw

而不是

px

.reddot{
高度：4vw；
宽度：4vw；
背景色：#D03C；
边界半径：50%；
显示：内联块；
位置：绝对位置；
top:20vw；
左：20vw；
}

.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>