CSS配售的元素，而不會影響彼此使用JavaScript動態

Question

我試圖創建圖像映射工具，因爲我的項目的一部分 http://jsfiddle.net/MBThE/12/

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

我試着放置鏈接作爲申報單並定位使用css .. 但問題是，添加或刪除新熱點reults重新定位其他元素..我發現這個解決方案爲 position:fixed熱點divs ..但這使得熱點保持在那裏本身甚至如果用戶向下或向上滾動....那麼有什麼辦法找到使用javascript向上或向下滾動的像素數量，並在滾動發生時觸發事件，以便我可以根據滾動增加或減少divs位置？

我認爲另一種選擇作爲HTML5畫布....但是這會導致不需要的圖像大小調整... 那麼有什麼辦法可以讓div不會相互影響，但也可以將它們放在容器div內？

注： - 點擊「添加熱點」按鈕，然後單擊圖像上添加hotspot..hover熱點編輯的熱點

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> 

希望幫助