Question

经过一些简化后，问题是当用户点击第一个图像时，我不知道如何将图像设置为另一个图像。在this fiddle中更容易看到这一点。

有什么问题？我认为问题是“相对” div＃problem 元素。如果从CSS中删除“ position：relative ”一切正常，但我需要亲戚。

另外，我已经注意到，如果我将“pin容器”更改为替代的（从 HTML 标签直接挂起）一切正常，但我需要内部的“针容器” 相对DIV 。

真正的问题是什么？我认为.offset()会给我{em>相对于文档的位置，如documentation中所述，.offset(coordinates)也会这样做。

注意：想法是黑框应该出现在与大图像相同的坐标中，但它似乎放错位置。

NOTE2 ：我不知道这是不是问题，但我正在使用Chrome和Firefox开发Ubuntu Linux。两个浏览器都显示黑盒子放错位置。

NOTE3 ：目标是获取大图像的坐标，并使用absolute定位在同一位置设置一个小方框。没有任何技巧可以设置与大图像相同的margin到黑匣子，抱歉。

Answer 1

.offset()找到元素相对于文档的位置。您似乎想要使用.position()来查找relative容器内的位置。

请参阅http://jsfiddle.net/T7czp/200/

您还需要应用原始图片所具有的边距，并使用.css()

应用新尺寸

Answer 2

.offset()返回元素相对于整个文档的位置。你想要的是获得相对于偏移父级的位置（在这种情况下为#inner）。这就是.position()的用途。

$("img").click(function () {
    var offset = $(this).position(); // not offset!
    var $pin = $('<img>')
            .addClass('pin')
            .attr('src', "http://208.86.154.173/shared/images/black_box.png")
            .css({top: offset.top, left: offset.left}); //.offset() works, but shouldn't
    $("#pins").append($pin);
});

为引脚添加5px的边距（与原始图像上的边距相同），并且引脚恰好出现在图像的左上角。

如何在相对元素上设置绝对位置？

2 个答案: