by kirupa | 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 b…

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

Not at all - do whatever you want with the code snippets and samples :stuck_out_tongue: I’m only restrictive about the tutorial text & images not being reproduced on other places.

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

I actually find writing and recording videos to be very relaxing :stuck_out_tongue:

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…

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 kno…

Cool! Thanks for sharing :slight_smile:

getBoundingClientRect and getClientRects have been my standbys in this domain for a long time. Updated WebTrax to reflect its use in eye-tracking comparison study and to generate aggregate heatmaps. Some minor fixes for IE were made as well. …

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 boundingCl…

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 :slight_smile:

kirupaForum

Get an Element's Position Using JavaScript

programming

Topic	Replies	Views
Get absolute position of an HTML element with JavaScript	206	January 25, 2013
Tutorial: Finding an Element's X, Y Position web dev	175	March 13, 2012
Kirupa.com - Fixing an Element's Position using CSS programming	335	November 23, 2014
Trouble getting element position	58	April 2, 2004
Trouble getting element position flash	42	April 2, 2004

Creating engaging and entertaining content for designers and developers since 1998.

Follow:

Loose Ends

What is a Kirupa?
About the Site
Handy Tools
Get Help

Get an Element's Position Using JavaScript

Related topics

Follow:

Popular

Loose Ends