How to get the position of an element relative to another using jQuery?

Question

Please have a look at this:

If you click the "Get Pos" link you will see the red div's position relative to the image.

Now say this image's size has changed at some point down the line. How can I get the new position for the red div based on the initial data?

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

Do you absolutely need to use jQuery? It might be easier to use CSS and have a parent element with the image and the watermark as child nodes. Then you can use positioning to get it in the bottom right corner no matter the size of the image. — Steven Lambert, Feb 24 '14 at 18:15
Given your example, if the size of your image changes, your watermark won't necessarily move, so its position relative to the image is still exactly the same. Are we assuming that the watermark will move with the image's size, or is your ultimate goal to re-place the watermark in proper position if the size of the image changes? — Steve, Feb 24 '14 at 18:29
@straker this is ultimately to overlay a watermark image on top of another image and flatten it. So css can't be used. — , Feb 24 '14 at 19:02
What exactly are you trying to do? I mean why do you need to get the position for the red div? — Sam Battat, Feb 24 '14 at 19:08
@Sam Battat Imagine the red div is a watermark image that I am allowing the user to move around and position as they like on the cat image. I then send the top and left position of the red div (the watermark) to the server side which then merges the watermark on top of the source image (cat) in those coordinates. But in the future the source image (cat) may get bigger or smaller. Rather than asking the user to reposition the watermark I would like to use the original coordinates (which will be saved in the database) and position the new watermark on the same spot on the image. — , Feb 24 '14 at 19:15
"and position the new watermark on the same spot on the image." Your requirement is not clear on what the 'same spot' on the image means. If you want the watermark to remain the 'same spot' then you would not need to do anything to reposition the watermark. If you want the watermark position to change proportionally based on the ratio amount the size of the image changed then just determine the new aspect ratio of the image and adjust the offset of the position of the watermark by that amount. — bdrx, Feb 24 '14 at 20:35
@bdrx I need to do the second thing you mentioned, can you please show me a code example of how to go about this? I am lost on the formula I need. — , Feb 24 '14 at 20:37
See http://stackoverflow.com/questions/3971841/how-to-resize-images-proportionally-keeping-the-aspect-ratio to get an idea. If you are worried about the image resizing you probably want to be concerned with resizing the watermark as well not just the position. If the resizing occurs on the server side you could just send back the new coordinates as part of an async call. — bdrx, Feb 24 '14 at 20:46

score 1 · Answer 1 · answered Feb 24 '14 at 22:02

Here is a solution to what I understand you want from question/comments:

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
        }

score 0 · Answer 2 · edited Nov 15 '17 at 20:43

You can accomplish your intended goal (placing the watermark at the right place even after size changes) without using javascript at all if you do just a little reworking. A working example of the following solution is here (just change the width of the .img-container to see it function).:

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

Your html containing the image will look basically like this:

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

And the css to get the placement to happen looks like this:

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

Here, the image will always match the width of its container, and the watermark will always place itself ten pixels from the right and ten pixels from the bottom of the container.

How to get the position of an element relative to another using jQuery?

2 Answers2