Positioning problems

HTML & CSS
1

hello there! I’m trying to make a map where there will be places of interests placed on the map. But i want it to act like this, that wherever i place the map, the locations will remain intact i mean if i put the map in the top of the page, the locations will remain at their respective places and so on. the markup and their styles are given below-

<div id="dhaka">
<div id="shantinagar"></div>
<div id="mirpur"></div>
</div>
<style>
#dhaka
{
	background-image:url(../img/...);
	background-repeat:no-repeat;
	width:704px;
	height:505px;	
	list-style:none;
	top:100px;
	left:100px;
	}
#shantinagar
	{
	background-image:url(../img/..);
	background-repeat:no-repeat;
	position:absolute;
	width:112px;
	height:21px;
	top:280px;
	left:560px;
	}
	#mirpur
	{
	background-image:url(../img/..);
	background-repeat:no-repeat;
	position:absolute;
	width:112px;
	height:21px;
	top:220px;
	left:310px;
	}
</style>