Координаты элементов относительно родительского элемента

Метод el.getBoundingClientRect() дает результат относительно верхнего левого угла окна просмотра (0,0), а не относительно родительского элемента, тогда как el.offsetTop, el.offsetLeft (и т.д.) дают результат относительно предок.

Как лучше всего иметь координаты элемента относительно его родителя? el.getBoundingClientRect() изменить (как?) использовать родительский элемент в качестве (0,0) координаты или еще el.offsetTop, el.offsetLeft и т.д.?

Ответ 1

Вы можете использовать getBoundingClientRect(), просто вычитая координаты родителя:

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}

Теперь у вас есть координаты дочернего элемента относительно его родителя.

Обратите внимание, что если top или left координаты отрицательны, это означает, что дочерний элемент избегает своего родителя в этом направлении. То же самое, если bottom или right координаты положительны.

Рабочий пример

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>