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（正好是第一个扩展的数量）

在位置：相对看起来很好，但只有在你不在里面的时候绝对/固定？ - 糟糕的选择。我必须计算用户屏幕大小/客户端大小并放置每个“点”左或计算MAP的左/上偏移量并使每个点map_offset_Left + myLeft

也许有一种方法可以将它们设置为依赖于MAP div并且彼此独立？

泰

Answer 1

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

HTML / CSS / JS元素定位

1 个答案: