javascript - How to get the x and y position of a deeply embedded element with respect to the root element itself?

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:

            style="position:relative;">
 

            
 
 

            

            

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