使用javascript / jquery將div定位在圖片的左上角

Question

我正在制作一個富文本格式的編輯器，並且嘗試將刪除按鈕div放置在由javascript動態插入的圖像的左上角。 因此，我必須在運行時確定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/-具有jQuery的.offset（）方法和position:absolute的上述解決方案。

JSFiddle： http : //jsfiddle.net/djuVT/1/-使用Javascript的.getBoundingClientRect（）方法和position:fixed;解決方案position:fixed; CSS