CSS使用javascript动态放置元素而不会相互影响

Question

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

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

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

我认为另一个替代方案是HTML5画布....但这会导致不需要的图像大小调整...那么有没有办法让div不会相互影响而是将它们放在容器div中？

注意: - 点击"添加热点"按钮,然后点击图片添加热点..点击热点以编辑热点

Answer 1

是的,position:绝对将基于最接近的父位置绝对位置:绝对或位置:相对.因此,您可以使用以下内容创建父级,然后在其中进行定位.

<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>

希望有所帮助