position div at top-left corner of image using javascript/jquery

position div at top-left corner of image using javascript/jquery

I am making a rich-text editor and I am trying to place a delete button
div at top-left corner of an image dynamically inserted by javascript.
Thus I must determine the position of the div at run-time. However, I
couldn't make it exactly located at the top-left corner. Here is my code:
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";
}
Any help would be greatly appreciated!