getBoundingClientRect和相对位置之间的冲突

getBoundingClientRect 是一个 DOM 方法，用于获取元素的大小及其相对于视口的位置

当你尝试获取一个元素的 getBoundingClientRect 信息时，它将返回元素的宽度、高度以及元素相对于视口的左上角和右下角的坐标。如果你希望知道元素相对于其他元素的位置，你需要手动计算它们之间的距离。

以下是一个例子，说明如何用 JavaScript 计算两个元素之间的相对位置：

function getPosition(elementA, elementB) {
  const rectA = elementA.getBoundingClientRect();
  const rectB = elementB.getBoundingClientRect();

  const deltaX = rectB.left - rectA.left;
  const deltaY = rectB.top - rectA.top;

  return {
    x: deltaX,
    y: deltaY,
  };
}

const elementA = document.getElementById("elementA");
const elementB = document.getElementById("elementB");

const relativePosition = getPosition(elementA, elementB);
console.log(`相对位置： (${relativePosition.x}, ${relativePosition.y})`);

这个方法可以计算出元素 A 相对于元素 B 的 x 和 y 方向上的距离。请注意，这个方法不包含任何样式属性，它只关注元素的位置。

如果你在使用 getBoundingClientRect 时遇到问题，可能是因为页面布局发生变化，或者某些 CSS 属性（如 transform、scroll 等）影响到元素的位置。在这种情况下，确保在页面布局稳定后调用此方法，或在修改 CSS 属性后重新计算位置。