位置div在圖像的左上角使用javascript/jquery

Question

我正在製作一個富文本編輯器，並且我試圖在JavaScript動態插入的圖像的左上角放置一個刪除按鈕div。因此我必須在運行時確定div的位置。但是，我無法使它完全位於左上角。這裏是我的代碼：

function showDeleteButton(image) { 
    var rect = image.getBoundingClientRect(); 
    var top = rect.top + $(document).scrollTop(); 
    var left = rect.left + $(document).scrollLeft(); 
    var deleteButton = $(".delete_button")[0]; 
    deleteButton.style.visibility = 'visible'; 
    deleteButton.style.top = top + "px"; 
    deleteButton.style.left = left + "px"; 
} 

任何幫助將不勝感激！

Answer 1

HTML

<div> 
    <div id="delete_button"></div> 
    <img src"foo.png" /> 
</div> 

和CSS

#delete_button{ 
    position:absolute; 
    top:0; 
    left:0 
    z-index:1; 
} 

Answer 2

您可以將刪除按鈕body元素的直接孩子。然後，您可以測量懸停圖像的偏移量，並將按鈕重新定位到其左上角。

CSS

.delete_button { 
    position:absolute; 
    display:none; 
} 

jQuery的

$(function() { 
    var deleteButton = $(".delete_button"); 
    var hovered_image = false; 
    $('img').mouseenter(function(e) { 
     hovered_image = this; 
     deleteButton.show(); 
     var img = $(this); 
     var offset = img.offset(); 
     deleteButton.css({ 
      top: offset.top + 'px', 
      left: offset.left + 'px' 
     }); 
    }).mouseleave(function(e) { 
     if (e.relatedTarget === deleteButton[0]) { 
      return; 
     } 
     deleteButton.hide(); 
     hovered_image = false; 
    }); 
    deleteButton.mouseleave(function(e){ 
     if (e.relatedTarget === hovered_image) { 
      return; 
     } 
     deleteButton.hide(); 
     hovered_image = false; 
    }); 
    deleteButton.click(function(e){ 
     hovered_image.parentNode.removeChild(hovered_image); 
     deleteButton.hide(); 
    }); 
}); 

的jsfiddle：http://jsfiddle.net/djuVT/ -the上面jQuery的.offset()方法和position:absolute溶液。

的jsfiddle：http://jsfiddle.net/djuVT/1/與JavaScript的.getBoundingClientRect()方法 - 其它解決方案和position:fixed; CSS