# Get an Element's Position Using JavaScript

**URL:** <https://forum.kirupa.com/t/get-an-elements-position-using-javascript/352186>\
**Category:** programming\
**Created:** [November 23, 2014, 1:34am UTC](https://forum.kirupa.com/t/get-an-elements-position-using-javascript/352186 "2014-11-23T01:34:38Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 23, 2014, 1:34am UTC](https://forum.kirupa.com/t/get-an-elements-position-using-javascript/352186/1 "2014-11-23T01:34:39Z")

</div>

by [kirupa](http://www.kirupa.com/me/index.htm) | 18 December 2012

While this may be hard to believe, especially if you are familiar with how layout in HTML works, elements are positioned in some sort of sensible manner. Those manners are many and often confusing to discuss here, but there is some logic behind the position of everything you see. With great certainty, all elements end up at a particular location.

* * *
This is a companion discussion topic for the original entry at [http://www.kirupa.com/html5/get\_element\_position\_using\_javascript.htm](http://www.kirupa.com/html5/get_element_position_using_javascript.htm)

---

<div class="post-metadata">

**Author:** ![aaronthelearner](https://avatars.discourse-cdn.com/v4/letter/a/87869e/32.png) [@aaronthelearner](https://forum.kirupa.com/u/aaronthelearner)\
**Post date:** [February 22, 2015, 12:58am UTC](https://forum.kirupa.com/t/get-an-elements-position-using-javascript/352186/2 "2015-02-22T00:58:17Z")

</div>

Great post. Do you have any copyright policy for the use of this code?

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [February 22, 2015, 6:01am UTC](https://forum.kirupa.com/t/get-an-elements-position-using-javascript/352186/3 "2015-02-22T06:01:05Z")

</div>

Not at all - do whatever you want with the code snippets and samples 😛

I’m only restrictive about the tutorial text & images not being reproduced on other places.

---

<div class="post-metadata">

**Author:** ![chacelp](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/chacelp/32/7336_2.png) [@chacelp](https://forum.kirupa.com/u/chacelp)\
**Post date:** [February 23, 2015, 4:37am UTC](https://forum.kirupa.com/t/get-an-elements-position-using-javascript/352186/4 "2015-02-23T04:37:55Z")

</div>

Where do you find the time to write all these great tutorials?? Speaking for myself after spending a full day at work in front of a computer I find it hard to get back on the computer when I get home again. 😄

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [February 24, 2015, 5:29am UTC](https://forum.kirupa.com/t/get-an-elements-position-using-javascript/352186/5 "2015-02-24T05:29:00Z")

</div>

I actually find writing and recording videos to be very relaxing 😛

---

<div class="post-metadata">

**Author:** ![trudge](https://avatars.discourse-cdn.com/v4/letter/t/e19adc/32.png) [@trudge](https://forum.kirupa.com/u/trudge)\
**Post date:** [September 5, 2017, 8:36pm UTC](https://forum.kirupa.com/t/get-an-elements-position-using-javascript/352186/6 "2017-09-05T20:36:25Z")

</div>

Hi. Newbie here, but I’m hoping you can help. I d/l your JS function to find the x,y position of an element on the window. But I’m getting ‘undefined’ when I do an alert. However, the element I’m trying to locate is an SVG element in an SVG block. Is that a problem, and if so, how can work around it? Many thanks, and really great work here.

---

<div class="post-metadata">

**Author:** ![ueli](https://avatars.discourse-cdn.com/v4/letter/u/a88e4f/32.png) [@ueli](https://forum.kirupa.com/u/ueli)\
**Post date:** [October 24, 2018, 8:31pm UTC](https://forum.kirupa.com/t/get-an-elements-position-using-javascript/352186/7 "2018-10-24T20:31:37Z")

</div>

I’m using the getPosition code in an application of mine, and I’m happy with it … except for a special case. I have a page containing a DIV with fixed size and overflow=auto, i.e. it creates a scrollbar (vertical in my case) when there is a lot of data. When I move the scrollbar down and want to know the position of an element in this DIV, relative to the browser window, I get wrong results. I found that the reason is that offsetParent skips the DIV with the scrollbar.  
I have created a modified version of it which produces the results I want. Here it is:

* * *

```
function getPosYScrolled(ele)
{
  var yPos = 0;

  var eleOffsetParent = ele;
  var eleParentElement = ele;

   while (eleOffsetParent && eleParentElement)
   {
     if (eleParentElement.tagName == "BODY") // deal with browser quirks with body/window/document and page scroll
     {
       var yScroll = eleOffsetParent.scrollTop || document.documentElement.scrollTop;
       yPos += (eleOffsetParent.offsetTop - yScroll + eleOffsetParent.clientTop);
       eleOffsetParent = eleOffsetParent.offsetParent;
    }
    else // for all other non-BODY elements
    { if (eleOffsetParent.isSameNode(eleParentElement))
      {
        yPos += (eleOffsetParent.offsetTop - eleOffsetParent.scrollTop + eleOffsetParent.clientTop);
        eleOffsetParent = eleOffsetParent.offsetParent;
      }
      else
      {
        if (eleParentElement.tagName == "DIV")
        { yPos -= eleParentElement.scrollTop; // seems to be a DIV with scrollbar
        }
      }
    }

    eleParentElement = eleParentElement.parentElement;
  }
  return yPos;
}

```

* * *

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [October 24, 2018, 9:15pm UTC](https://forum.kirupa.com/t/get-an-elements-position-using-javascript/352186/8 "2018-10-24T21:15:36Z")

</div>

Cool! Thanks for sharing 🙂

---

<div class="post-metadata">

**Author:** ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)\
**Post date:** [October 25, 2018, 4:23am UTC](https://forum.kirupa.com/t/get-an-elements-position-using-javascript/352186/9 "2018-10-25T04:23:03Z")

</div>

`getBoundingClientRect` and `getClientRects` have been my standbys in this domain for a long time.

> <https://github.com/CMUBigLab/webanywhere/commit/4c36c7909ccc46386c0871116b2353a50f218bb4#diff-bf98c2ea72fa73f06852ac7ddc718747R362>

The plural version is useful for overlaying rectangles on top of elements with complex bounding regions like `span` elements.

 ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/3/371ec23a3d3446ddd8376e83317a20ac3c0f371b.jpeg)

---

<div class="post-metadata">

**Author:** ![REB\_412](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/reb_412/32/9233_2.png) [@REB\_412](https://forum.kirupa.com/u/REB_412)\
**Post date:** [November 8, 2018, 3:07pm UTC](https://forum.kirupa.com/t/get-an-elements-position-using-javascript/352186/10 "2018-11-08T15:07:13Z")

</div>

Would you care to comment on the following alternative approach for getting an element’s position:  
function getPosition(el) {  
let rect,X=0,Y=0;  
if (el) {  
rect=el.getBoundingClientRect();  
X = rect.left + window.scrollX;  
Y = rect.top + window.scrollY;  
}  
return { x: X, y: Y }  
}  
The boundingClientRect() routine gives the elements position relative to the viewport, which in this case is the browser window, and is available in all modern day browsers. It is much simpler than your solution and gives the same results.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 9, 2018, 4:05am UTC](https://forum.kirupa.com/t/get-an-elements-position-using-javascript/352186/11 "2018-11-09T04:05:17Z")

</div>

That totally works. My reason for not using that API is performance. The `getBoundingClientRect` API tends to cause unnecessary reflows and style invalidation each time it is called 🙂

---

<div class="post-metadata">

**Author:** ![REB\_412](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/reb_412/32/9233_2.png) [@REB\_412](https://forum.kirupa.com/u/REB_412)\
**Post date:** [November 11, 2018, 9:41pm UTC](https://forum.kirupa.com/t/get-an-elements-position-using-javascript/352186/12 "2018-11-11T21:41:42Z")

</div>

That is nice to know and reason to avoid using it, especially on a large page. However, how is one to know that “unnecessary reflows” will occur with this or any other API?

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 12, 2018, 12:36am UTC](https://forum.kirupa.com/t/get-an-elements-position-using-javascript/352186/13 "2018-11-12T00:36:49Z")

</div>

If you will be calling the API just once or not as part of a user interaction, that is ok. The way you can find out is by using the browser developer tools. There are only a handful of APIs that fall under this bucket - the other big one being `getComputedStyle`.

---

<div class="post-metadata">

**Author:** ![REB\_412](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/reb_412/32/9233_2.png) [@REB\_412](https://forum.kirupa.com/u/REB_412)\
**Post date:** [November 12, 2018, 12:56am UTC](https://forum.kirupa.com/t/get-an-elements-position-using-javascript/352186/14 "2018-11-12T00:56:29Z")

</div>

Again thank you. I’ll check the Developer Tools again to look for this. I haven’t noticed it before although I’m a very frequent user of the developer tools in all of the browsers that I work with.

---

<div class="post-metadata">

**Author:** ![REB\_412](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/reb_412/32/9233_2.png) [@REB\_412](https://forum.kirupa.com/u/REB_412)\
**Post date:** [November 19, 2018, 7:51pm UTC](https://forum.kirupa.com/t/get-an-elements-position-using-javascript/352186/15 "2018-11-19T19:51:58Z")

</div>

I am finding a difference in positioning using your code and the one based on the getBoundingClientRect() method. I’ve summarized what I am finding in the following article ([http://www.boughner.us/kirupa/element\_position.html](http://www.boughner.us/kirupa/element_position.html)). I have not been able to determine what is causing this difference so any help that I can get would be appreciated.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [March 14, 2019, 5:00pm UTC](https://forum.kirupa.com/t/get-an-elements-position-using-javascript/352186/17 "2019-03-14T17:00:01Z")

</div>

A post was split to a new topic: [Intellisense](https://forum.kirupa.com/t/intellisense/639502)