Basj Basj - 1 year ago 50
CSS Question

Element's coordinates relative to its parent

The method

el.getBoundingClientRect()
gives a result relative to the viewport's top-left corner (
0,0
), not relative to an element's parent, whereas
el.offsetTop
,
el.offsetLeft
(etc.) give a result relative to the parent.

What is the best practice to have the coordinates of an element relative to its parent?
el.getBoundingClientRect()
modified (how?) to use parent as
(0,0)
coordinate, or still
el.offsetTop
,
el.offsetLeft
and so on?

Answer Source

You can use getBoundingClientRect(), simply subtracting the coordinates of the parent:

var parentPos = document.getElementById('parent-id').getBoundingClientRect(),
    childrenPos = document.getElementById('children-id').getBoundingClientRect(),
    relativePos = {};

relativePos.top = childrenPos.top - parentPos.top,
relativePos.right = childrenPos.right - parentPos.right,
relativePos.bottom = childrenPos.bottom - parentPos.bottom,
relativePos.left = childrenPos.left - parentPos.left;

console.log(relativePos);
// something like: {top: 50, right: -100, bottom: -50, left: 100}

Now you have the coordinates of the children relative to its parent.

Note that if the top or left coordinates are negative, it means that the children escapes its parent in that direction. Same if the bottom or right coordinates are positive.

Working example

var parentPos = document.getElementById('parent-id').getBoundingClientRect(),
    childrenPos = document.getElementById('children-id').getBoundingClientRect(),
    relativePos = {};

relativePos.top = childrenPos.top - parentPos.top,
relativePos.right = childrenPos.right - parentPos.right,
relativePos.bottom = childrenPos.bottom - parentPos.bottom,
relativePos.left = childrenPos.left - parentPos.left;

console.log(relativePos);
#parent-id {
    width: 300px;
    height: 300px;
    background: grey;
}

#children-id {
    position: relative;
    width: 100px;
    height: 200px;
    background: black;
    top: 50px;
    left: 100px;
}
<div id="parent-id">
    <div id="children-id"></div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download