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

【问题标题】：How to get the position of an element relative to another using jQuery?如何使用jQuery获取一个元素相对于另一个元素的位置？
【发布时间】：2017-11-16 04:43:31
【问题描述】：

请看这个：

http://liveweave.com/5bhHAi

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

现在说这张图片的大小在某个时间点发生了变化。如何根据初始数据获取红色 div 的新位置？

HTML：

  <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>

jQuery:

$(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');
    });

});

CSS：

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

【问题讨论】：

你绝对需要使用 jQuery 吗？使用 CSS 并且将带有图像和水印的父元素作为子节点可能会更容易。然后无论图片大小，都可以使用定位将其置于右下角。
以您的示例为例，如果图像的大小发生变化，您的水印不一定会移动，因此它相对于图像的位置仍然完全相同。我们是假设水印会随着图像的大小而移动，还是您的最终目标是在图像大小发生变化时将水印重新放置在适当的位置？
@Steve 你说的最后一句话。
@straker 这最终是将水印图像覆盖在另一个图像之上并将其展平。所以css不能用。
你到底想做什么？我的意思是你为什么需要获得红色 div 的位置？

标签： javascript jquery

【解决方案1】：

这是我理解您希望从问题/cmets 获得的解决方案：

http://jsfiddle.net/tXT2d/

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

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

【讨论】：

【解决方案2】：

只要稍作修改，您就可以实现您的预期目标（即使在大小更改后也将水印放置在正确的位置），而无需使用 javascript。以下解决方案的工作示例是here （只需更改.img-container 的宽度即可查看它的功能）。：

.watermark {
  background: red;
  width: 50px;
  height: 50px;
}

.img-container {
  width: 295px;
  height: auto;
  position: relative;
}

.img-container img {
  width: 100%;
}

.img-container .watermark {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

<div class="img-container">
  <div class="watermark"></div>
  <img src="http://placekitten.com/g/320/270" class="small-img">
</div>

包含图像的 html 基本上如下所示：

<div class="img-container">
  <div class="watermark"></div>
  <img src="http://placekitten.com/g/320/270" class="small-img">
</div>

实现展示位置的 css 如下所示：

.watermark { background: red; width: 50px; height: 50px; }

.img-container {
  width:  275px;
  height:  auto;
  position: relative;
}

.img-container img {
  width: 100%;
}

.img-container .watermark {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

在这里，图像将始终与其容器的宽度相匹配，并且水印将始终将自身放置在距容器右侧 10 个像素和距容器底部 10 个像素的位置。

【讨论】：