Question

请看一下：

如果单击“获取位置”链接，您将看到红色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;
}

此处，图像将始终与其容器的宽度相匹配，并且水印将始终放置自右侧十个像素和距离容器底部十个像素。

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

2 个答案: