How to Get the Position of an Element Relative to Another with JavaScript?

To get the position of an element relative to another, first get the position of the element relative to the window using the getBoundingClientRect() method and then subtract the position of another element from it.

The getBoundingClientRect() method returns a DOMRect object that contains the top, left, bottom, right, width and height properties that describes the position and dimensions of the element.

The values of the top, left, bottom and right properties are relative to the viewport. Therefore, if you want to get the position of one element relative to another, you have to subtract them.

For example, let’s say we have two div elements inside the same parent div and we want to get the position of the second div relative to the first:

<div id="parent">
    <div id="elem1"></div>
    <div id="elem2"></div>
</div>

Adding some CSS to set their position(for demonstration purpose):

#parent{
   position: relative;
}
#elem1,#elem2{
   width: 100px;
   height: 100px;
   position: absolute;
   border: 2px solid grey;
}
#elem2{
   margin-top: 40px;
   margin-left: 40px;
   background: yellow;
}

This gives us the following output:

Add the below JavaScript code to get the position of one element relative to another:

// Get references to the elements
const elem1 = document.getElementById('elem1');
const elem2 = document.getElementById('elem2');

// Get client Rect
const rect1 = elem1.getBoundingClientRect();
const rect2 = elem2.getBoundingClientRect();

// Calculate the difference
const leftPos = rect2.left - rect1.left;
const topPos  = rect2.top  - rect1.top;

console.log('Position of second element relative to first is: ');
console.log(`left= ${leftPos}, top = ${topPos}`);

Output:

Position of second element relative to first is: 
left= 40, top = 40

Get the Position of an Element Relative to its Parent

To get the position of an element relative to its parent container, you can first get the position of the element relative to the window with the help of the getBoundingClientRect() method and then subtract the position of the parent from it.

This will give you the element’s position relative to its parent.

For example, let’s say we have a div element inside another div and we want to get the position of the inner div relative to its parent div container:

<div id="parent">
    <div id="child"></div>
</div>

Adding some CSS:

#parent{
    width: 200px;
    height: 200px;
    border: 2px solid grey;
}
#child{
    width: 100px;
    height: 100px;
    border: 2px solid grey;
    margin-left: 30px;
    margin-top: 30px;
    background-color: yellow;
}

This will give you the following output:

Add the following JavaScript code to get the position of the inner div relative to the outer one:

// Get references to the elements
const child = document.getElementById('child');
const parent = document.getElementById('parent');

// Get client Rect
const childRect = child.getBoundingClientRect();
const parentRect = parent.getBoundingClientRect();


// Calculate the difference
const leftPos = childRect.left - parentRect.left;
const topPos  = childRect.top  - parentRect.top;

console.log('Position of child element relative to its parent is: ');
console.log(`left= ${leftPos}, top = ${topPos}`);

Output:

Position of child element relative to its parent is: 
left= 32, top = 32

Thanks for reading.