1

我试图创建一个图像映射工具作为我项目的一部分 http://jsfiddle.net/MBThE/12/

全屏结果：http: //jsfiddle.net/MBThE/12/embedded/result/

我尝试将链接放置为 div 并使用 css 定位。但问题是添加或删除新热点会导致重新定位其他元素。我找到了解决 position:fixed热点 div 的解决方案。但这使得即使用户向下或向上滚动，热点仍会保留在那里......那么有没有办法使用javascript找到向上或向下滚动的像素数并在滚动发生时触发事件，这样我就可以增加或减少div的位置根据滚动？

我认为另一种选择是 HTML5 画布......但这会导致不需要的图像大小调整......那么有没有办法让 div 不会相互影响，但也可以将它们放在容器 div 中？

注意：- 单击“添加热点”按钮并单击图像以添加热点..悬停热点以编辑热点

4

1 回答 1

6

是的，position:absolute 将绝对基于最近的父级定位，即 position:absolute 或 position:relative。因此，您可以使用以下内容创建父级，然后在其中定位。

<div style="position:relative" id="parentDiv">
     <div style="position:absolute; top:15px; left:15px">I am 15 pixels from the top and left side of my parent div </div>
     <div style="position:absolute; top:30px; left:30px">I am 30 pixels from the top and left side of my parent div </div>
</div>

希望有帮助

于 2012-05-04T16:14:39.663 回答