60

So I have a div like:

<div class="uiGrid">

<div class="trigger"></div>

</div>

And I want to know the position of trigger to uiGrid and have tried both these:

$('.trigger').offset('.uiGrid');

$('.trigger').position('.uiGrid');

but neither get it. Offset is relative to the document and position is relative to the parent and not the specified element.

How would I do this? Thanks

1

4 Answers 4

91

just do the subtraction your self...

var relativeY = $("elementA").offset().top - $("elementB").offset().top;

2
  • worked perfectly on Chrome, but Firefox gives totally different numbers 😟
    – No Sssweat
    Mar 27, 2018 at 17:40
  • For my use case, since the Firefox numbers are off by a bit, all I did was a round relativeY to the nearest tenth 😀
    – No Sssweat
    Mar 27, 2018 at 18:02
11

what you can do here is basically, subtract parent property value from child property value.

var x = $('child-div').offset().top - $('parent-div').offset().top;
6
  • where to put theses subtracting value ? Jun 7, 2013 at 10:32
  • thanks” is appreciated. Sorry i forgot to show it by assigning to a variable. so what you have to do is just define a variable and assign the subtracting value. var x = $('child-div').offset().top - $('parent-div').offset().top; Jun 13, 2013 at 10:53
  • 7
    Why did you feel the need to post a redundant answer 2.5 years after the an accepted answer was posted?
    – VictorKilo
    Jan 24, 2014 at 20:57
  • 3
    It clarifies which element's position is subtracted from the other. See child/parent vs. A/B Jan 6, 2015 at 2:56
  • 4
    @MaxStrater Perhaps. but they could have commented on the original answer or at least give some kind of credit to the OP.
    – actaram
    May 17, 2017 at 14:19
4

You're missing the point here....

Besides that, try:

myPosY = $('.trigger').offset().left - $('.uiGrid').offset().left;
myPosX = $('.trigger').offset().top - $('.uiGrid').offset().top;
1
  • oh but : myPosY is top , myPosX is left
    – tiepnv
    May 3, 2017 at 12:02
4

The problem for me was the fact that I was in a div with a scrollbar and that I had to be able to take into account the hidden part down to the root element.

If I use ".offset()" it gave me wrong values, because it does not take into consideration the hide part of scrollbar as it is relative to the document.

However, I realized that the ".offsetTop" property relative to its first parent positioned (offsetParent) was always correct. So I made a loop to go recursively to the root element by additionning the values of ".offsetTop":

I did my own jquery function for that:

jQuery.fn.getOffsetTopFromRootParent = function () {
    let elem = this[0];
    let offset = 0;
    while (elem.offsetParent != null) {
        offset += elem.offsetTop;
        elem = $(elem.offsetParent)[0];
        if (elem.offsetParent === null) {
            offset += elem.offsetTop;
        }
    }
    return offset;
};

You can use the same with ".offsetLeft" I suppose...

If you want to get position of element relative to another element to answer the question:

let fromElem = $("#fromElemID")[0];
let offset = 0;
while (fromElem.id.toUpperCase() != "toElemID".toUpperCase()) {
    offset += fromElem.offsetTop;
    fromElem = $(fromElem.offsetParent)[0];
}
return offset;

An element (offsetParent) is said to be positioned if it has a CSS position attribute of relative, absolute, or fixed.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.