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

是的，位置：绝对位置绝对位于最近的父级位置：绝对位置：绝对位置：相对位置。因此，您可以使用以下内容创建父项，然后在其中定位。

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

希望有所帮助

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

1 个答案: