0

What is the best way, if indeed there is a way, to get the X and Y position of any element embedded deep inside another element (called root for convenience) with respect to the root element itself. The embedded element may have layers of other containers with different position CSS (e.g. relative, absolute, etc.). I prefer JQuery but a pure JS solution would be even better.

For example:

<div id="root" style="position:relative;">
  <div style="position:relative;top:10px;> <other elements....>
      <div style="position:absolute:top:30px;> <other elements...>
         <div id="id1" ... /> 
      </div>
  </div>
</div>

I want to know the absolute X and Y positions of input field with id "id1" with respect to div with id "root".

EDIT: "root" is always set to position:relative

Sunny
  • 9,245
  • 10
  • 49
  • 79
  • 1
    get xy of child, get xy of parent, subtract them. – apple apple Jun 12 '19 at 03:09
  • 1
    > you want the absolute X and Y positions with respect to #root, that would make them a relative position. :P – J-Cake Jun 12 '19 at 03:10
  • Get xy of child, get xy of parent... the problem is multiple level of embedding. Get x, y (whatever that broad term implies) will be with respect to the immediate parent. So... I need to keep doing this until I reach root. Is there a shortcut? – Sunny Jun 12 '19 at 03:15
  • 1
    Very good example here, was gonna post an answer but it is documented here: https://stackoverflow.com/questions/442404/retrieve-the-position-x-y-of-an-html-element – ABC Jun 12 '19 at 03:20
  • Thanks to all. Yes it is already answered. Sorry for the trouble. – Sunny Jun 12 '19 at 03:23

0 Answers0