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

Question

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

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

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

我考虑另一种替代方案，如 HTML5 canvas....但这会导致不必要的图像大小调整...那么有什么办法可以让div之间既不互相影响又可以放在容器div里面呢？

注意:- 单击“添加热点”按钮并单击图像以添加热点。将鼠标悬停在热点上以编辑热点

Answer 1

是的，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>

希望对你有帮助