HTML/CSS/JS Elements positioning

Question

have a problem. At first look at this HTML

<div id="map" style="background-image: url(map.png); width: 700; height: 600;">
  <div id="dot1" onMouseOver=expand(this) onMouseOut=shrink(this)></div>
  <div id="dot2" onMouseOver=expand(this) onMouseOut=shrink(this)></div>
</div>

and I have next JS code

function expand(element) {
  element.style.height = '100px';
}
function shrink(element) {
  element.style.height = '20px';
}

IDEA is: imagine map and multiple "red dots" on it on mouse over it's expanding to 100x100, getting white background and text inside about this spot. Only one problem is - how to make other dots stick to the map while one of them is expanded?

For example user is looking on "top" spot, and every else under current one is moving down for ~100px (exactly amount of expanding 1st one)

It looks fine at but only while you're not looking inside. 看起来很好，但仅当您不向内看时。
Absolute/fixed? - Bad option. I have to calculate user screen size / client size and place every "dot"
OR calculate MAP's left/top offset and make every dot map_offset_Left+myLeft

Maybe there is a way to set them dependent from MAP div and be independent from each other?

Ty

Answer 1

将地图设置为position: relative ，然后将其绝对定位的后代相对于地图而不是窗口定位。