如何使响应成为绝对位置？

Question

我在图像上制作了一个地图标签，当点击地图的特定部分时，它会将用户带到一个特定的 URL，因此它可以在大屏幕上工作，但在中小屏幕上，绝对位置会改变它在另一个位置的位置。

在 CSS 中，我制作了一堆带有标签的元素，这些元素在图像中的位置正确。

        <div className="Afghan-map ">
                <img src={map} className="Afg-map mw-100" alt="afg-map" />

                <a
                    href="http://192.168.90.4/users/"
                    title="Badghis"
                    className="badghis province"
                    target="_blank"
                    rel="noreferrer"
                />
                <a
                    href="http://192.168.70.3/users/"
                    title="Balkh"
                    className="balkh province"
                    target="_blank"
                    rel="noreferrer"
                />
                <a
                    href="http://192.168.50.5/users/"
                    title="Jallal Abad"
                    className="jallal-abbad province"
                    target="_blank"
                    rel="noreferrer"
                />
                <a
                    href="http://192.168.80.1/users/"
                    title="Herat"
                    className="herat province"
                    target="_blank"
                    rel="noreferrer"
                />
                <a
                    href="http://192.168.60.2/users/"
                    title="Kabul"
                    className="kabul province"
                    target="_blank"
                    rel="noreferrer"
                />
            </div>

#这是我的CSS代码

.Afghan-map {
.Afg-map {
    margin: 0 auto;
}

margin: 0;
padding: 0;
position: relative;
text-align: center;
.province {
    position: absolute;
    z-index: 2;
}

.balkh {
    left: 43.89%;
    top: 21.71%;
    width: 8.33%;
    height: 10.71%;
}

.jallal-abbad {
    left: 59%;
    top: 44.86%;
    width: 4.44%;
    height: 4.29%;
}

.badghis {
    left: 30.78%;
    top: 33.57%;
    width: 9.33%;
    height: 10.86%;
}

.kabul {
    left: 54.89%;
    top: 42%;
    width: 4.33%;
    height: 5.29%;
}

.herat {
    left: 24.11%;
    top: 42.43%;
    width: 9.33%;
    height: 15.71%;
}

}