Responsive map with mark (div element) - html

Question

everybody
I have problem with responsive map (this is only image not real map). I try to stick div element on this map for example: my mark(div) is on Paris but when I resize window mark is in other country :D I want stick this element for this one country. I try like this:
HTML:
<div class="container-fluid map">
<div class="circle"></div>
</div>
CSS:
.map {
background-image: url(../images/only-map.png);
background-repeat: no-repeat;
background-size: 100% 100%;
height: 500px;
width: 100%;
position: relative;
}
.circle {
width: 10px;
height: 10px;
background-color: #fff;
position: absolute;
top: 200px;
right: 400px;
float: right;
}
I try with position absolute, fixed. Background size cover,contain, 100% 100%, but still not working.
Thank for every advance

Answer 1

You can do something like this:
HTML:
<div class="map rel">
<div class="dot abs">
</div>
</div>
CSS:
.map{
width: 500px;
height: 500px;
background-color: blue;
}
.dot{
width: 20px;
height: 20px;
background-color: red;
}
.rel{
position: relative;
}
.abs{
position: absolute;
top: 8px;
left: 8px;
}
You can play around with it here. Hope that helps.

Answer 2

you need to use a position in percentage
.circle {
position: absolute;
top: 40%;
left: 50%;
}
but keep in mind that your circle will be centered on it's corner, wich you can prevent by adjusting your percentages and setting:
.circle {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%); //else only the upper-left corner of the circle div will be centered on paris)
}
as it has been said, it's always hard to help without seeing the actual image and result, but this might work