Позиционирование элементов HTML/CSS/JS

Question

есть проблема. На первый взгляд в этом 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> 

и у меня есть следующий JS код

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

IDEA является: представьте себе карту и несколько «красных точек» на нем при наведении мыши он расширяется до 100x100, получая белый фон и текст внутри этого места. Только одна проблема заключается в том, как сделать другие точки привязаны к карте, пока один из них расширяется?

Например, пользователь смотрит на «сверху» месте, и каждый еще под текущий движется вниз по ~ 100px (точно количество расширения 1-ый)

Он выглядит штраф в позиции: относительная, но только пока вы не смотрите внутрь.
Абсолютный/фиксированный? - Плохой вариант. Я должен вычислить размер/размер пользовательского экрана пользователя и поместить каждую «точку»
ИЛИ рассчитать смещение левого/верхнего верхнего края карты и сделать каждую точку map_offset_Left + myLeft

Возможно, есть способ установить их в зависимости от div MAP и быть независимым друг от друга?

Ty

Answer 1

Установите карту в position: relative, его абсолютно позиционируемые потомки, то будет позиционироваться относительно карты и не окно.