如何使用jQuery獲取元素相對於另一個元素的位置？

Question

請看一下這個：

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

Answer 1

這是我從問題/評論中了解到的解決方案：

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
        }

Answer 2

如果您稍作修改，就可以完全不需要使用javascript來實現預期的目標（即使在大小更改后也將水印放置在正確的位置）。 以下解決方案的一個有效示例在此處（只需更改.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;
}

在這里，圖像將始終與容器的寬度匹配，並且水印將始終將其自身放置在容器右側的十個像素和底部的十個像素處。