Javascript 如何使用jQuery获取元素相对于另一个元素的位置？

请看一下这个：

如果单击“获取位置”链接，您将看到红色div相对于图像的位置

现在，假设这张图片的大小在线条的某个点发生了变化。如何根据初始数据获得红色div的新位置

HTML:

CSS:

---

以下是我从问题/评论中了解到您想要的解决方案：

---

只要稍加修改，就可以实现预期目标（即使在大小更改后也将水印放置在正确的位置），而无需使用javascript。下面是以下解决方案的工作示例 （只需更改

.img容器的宽度即可查看其功能）：


。水印{
背景：红色；
宽度：50px；
高度：50px；
}
.img集装箱{
宽度：295px；
高度：自动；
位置：相对位置；
}
.img容器img{
宽度：100%；
}
.img容器.水印{
位置：绝对位置；
右：10px；
底部：10px；
}

您确实需要使用jQuery吗？使用CSS和将图像和水印作为子节点的父元素可能更容易。然后，无论图像大小如何，都可以使用定位将其置于右下角。举个例子，如果图像大小发生变化，水印不一定会移动，因此其相对于图像的位置仍然完全相同。我们是否假设水印会随着图像的大小而移动，或者如果图像的大小发生变化，您的最终目标是将水印重新放置在适当的位置？@Steve您最后说的话。@straker这最终是将水印图像覆盖在另一图像上并将其展平。所以css不能被使用。你到底想做什么？我是说你为什么要得到红队的职位？
  <div id="watermark"></div>

  <img src="http://placekitten.com/g/320/270" class="small-img">
  <div><br><br><a href="#" class="get-pos">Get Pos</a></div>

$(document).ready(function() {
    var $watermark = $('#watermark');

    $('.get-pos').on('click', function(e) {
      e.preventDefault();

      var watermark_position = {
        top: $watermark.position().top - $('.small-img').position().top,
        left: $watermark.position().left - $('.small-img').position().left
      };
      alert(watermark_position.top + 'px from the top');
      alert(watermark_position.left + 'px from the left');
    });

});

#watermark { background: red; position: absolute; top: 215px; left: 265px; width:  50px; height: 50px; }

        var imgPos = $(".image img").offset();
        var wmPos_tmp = $(".watermark").offset();

        var watermarkPosition = {
            top: wmPos_tmp.top - imgPos.top,
            left: wmPos_tmp.left - imgPos.left
        }