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

【问题标题】：How to set an absolute position on a relative element?如何在相对元素上设置绝对位置？
【发布时间】：2012-12-10 16:38:43
【问题描述】：

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

有什么问题？我相信问题在于“相对” div#problem 元素。如果你从 CSS 中删除“position:relative”一切正常，但我需要这里的相对。

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

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

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

NOTE2：我不知道这是否是问题所在，但我正在使用 Chrome 和 Firefox 开发 Ubuntu Linux。两种浏览器都显示错位的黑框。

NOTE3：目标是获取大图像的坐标，并使用absolute 定位在同一位置设置一个小框。没有像将大图一样的margin设置为黑盒子的技巧，对不起。

【问题讨论】：

我对你想要发生的事情有点困惑......当我点击图像时，一个黑色方块出现在它上面。它应该出现在特定的位置吗？
我也很困惑。您正在获取父 img 的 offset 并将其应用于您正在添加的黑匣子。它正在按我的预期工作，但我怀疑这就是你想要做的。您是否尝试将框放在鼠标点击的位置？
@ExplosionPills 抱歉，黑框应该出现在与大图相同的偏移处，但它似乎向下和向右移动了一些像素
@MattBurland：不，该框应该出现在大图像的左上角，但至少在我尝试的浏览器中出现错位。我在 Linux 上工作：Chrome 和 Firefox 给出相同的结果。
它给出了相同的结果，因为它正在做它应该做的事情。也许您将.offset 与.position 混淆了？

标签： jquery html css offset

【解决方案1】：

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

见http://jsfiddle.net/T7czp/200/

您还需要应用原始图像的边距并使用.css() 应用新尺寸

【讨论】：

【解决方案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 的边距（与原始图像上的边距相同），图钉正好出现在图像的左上角。

【讨论】：