html - 中央の要素の上に要素をレスポンシブに配置する

Question

中心になっているイメージがあります。その上に、いろいろなクリックポイントを配置したい。私は可能な限り最も応答性の高い方法でこれを行おうとしていますが、これまでのところ、運がありません. 誰か洞察を貸してもらえますか？これについて評価を下げたくありませんが、答えを見つけるのに苦労しています。

これは私のHTMLです：

<img src="images/Map.png" id="map" />
<img class="down" id="location1" src="images/square.png"/>
<img class="down" id="location2" src="images/square.png"/>
<img class="down" id="location3" src="images/square.png"/>
<img class="down" id="location4" src="images/square.png"/>

そして、ここに私のCSSがあります:

#map {
    position:relative;
    display: block;
    width:700px;
    margin-top:130px;
    margin-left:auto;
    margin-right:auto;
    height: 515px;
}
.down {
    width: 20px;
    height: auto;
    position: absolute;
    cursor:pointer;
}
#location1 {
    top: 230px;
    left: 39%;
}
#location2 {
    top: 240px;
    left: 38%;
}
#location3 {
    top: 410px;
    left: 60%;
}
#location4 {
    top: 390px;
    left: 59%;
}