Description: Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.

• version added: 1.2

  • This method does not accept any arguments.

The .position[] method allows us to retrieve the current position of an element [specifically its margin box] relative to the offset parent [specifically its padding box, which excludes margins and borders]. Contrast this with .offset[], which retrieves the current position relative to the document. When positioning a new element near another one and within the same containing DOM element, .position[] is the more useful.

Returns an object containing the properties top and left.

Note: jQuery does not support getting the position coordinates of hidden elements or accounting for margins set on the document element.

When we left jQuery behind and embraced modern JavaScript frameworks, we thought we would never touch DOM directly again. Well that is not entirely true. There are a lot of cases when you need to get some DOM element size. For element's dimensions .offsetWidth and .offsetHeight are great way to do it.

But one of the other common tasks is getting element's offset, top and left. I'll show you two ways to get those.

Using offsetTop / offsetLeft

This one is old school, and there is nothing wrong with it. Even today, this method lives in my helpers.js. It is looping to the root of the DOM tree and performance obsessed people may having problem with it. But so far I never had performance issue with it, and I'm talking about production level projects.

One important thing to note - it is not taking CSS transforms into calculations. Everything is calculated from element's original position.

function getElementOffset[el] {
  let top = 0;
  let left = 0;
  let element = el;

   Loop through the DOM tree
   and add it's parent's offset to get page offset
  do {
    top += element.offsetTop || 0;
    left += element.offsetLeft || 0;
    element = element.offsetParent;
  } while [element];

  return {
    top,
    left,
  };
}

Using getBoundingClientRect

Another way is using getBoundingClientRect which is cool because it takes CSS transforms into calculations and it is natively supported. No need to loop through the element's parents. But it's top and

function getElementOffset[el] {
  const rect = el.getBoundingClientRect[];

  return {
    top: rect.top + window.pageYOffset,
    left: rect.left + window.pageXOffset,
  };
}

// If you want to support IE8 and lower
// Use
//
// top: rect.top + [window.pageYOffset || document.documentElement.scrollTop],
// left: rect.left + [window.pageXOffset || document.documentElement.scrollLeft],

0 properties are distances from the viewport, not from the document. Because of this, you need to add document scroll to it.

Just note one thing, there is a known bug with iOS and getBoundingClientRect in combination with

function getElementOffset[el] {
  const rect = el.getBoundingClientRect[];

  return {
    top: rect.top + window.pageYOffset,
    left: rect.left + window.pageXOffset,
  };
}

// If you want to support IE8 and lower
// Use
//
// top: rect.top + [window.pageYOffset || document.documentElement.scrollTop],
// left: rect.left + [window.pageXOffset || document.documentElement.scrollLeft],

2. I found about this bug few days ago when I was working on react-plx. Sometimes it is just returning the wrong values. So, when you have fixed elements, you probably want to fallback to the method above

How to get top position of element in JavaScript?

JavaScript offsetTop Property It returns the top position in pixels, relative to the top of the parent element. It includes the top position, and margin of the element and the top padding, scrollbar, and border of its parent element.20 thg 12, 2023nullHow to find the position of HTML elements in JavaScriptwww.geeksforgeeks.org › how-to-find-the-position-of-html-elements-in-ja...null

How to get element by position in JavaScript?

The elementFromPoint[] method, available on the Document object, returns the topmost Element at the specified coordinates [relative to the viewport].nullDocument: elementFromPoint[] method - Web APIs | MDNdeveloper.mozilla.org › en-US › docs › Web › API › elementFromPointnull

How do you check if an element is at the top of the page?

You can use the offset[] method to obtain where an element is relative to the document, and you can use the scrollTop[] method to figure out where the top of the document is. If the element offset is at 1000 and scrollTop is more than 1000, you know that you've scrolled the element above off the screen.nullQuick: When

element reaches the top of the window - SitePointwww.sitepoint.com › community › quick-when-element-reaches-the-top-of...null

How to get element distance from top of window?

You can use . offset[] to get the offset compared to the document element and then use the scrollTop property of the window element to find how far down the page the user has scrolled: var scrollTop = $[window]. scrollTop[], elementOffset = $['

my-element'].nulljquery - Determine distance from the top of a 'div' to top of the window ...stackoverflow.com › questions › determine-distance-from-the-top-of-a-div...null