使用display:flex与getBoundingClientRect获取节点位置异常问题

父节点（document.body）样式如下：

margin: 0;
padding: 0;
height: 100vh;
width: 100vw;
overflow: hidden;

display: flex;
align-items: center;
justify-content: center;

子元素为HTMLDivElement[]，样式为：

width: 12.5em;
height: 20em;

通过body.append(...)让Firefox 112.0.1 (32-bit)渲染所有子元素，再用getBoundingClientRect()获取位置，随后为子元素添加position: absolute并设置该位置样式。预期子元素位置不变，但实际每个子元素相对左侧相邻元素有自身宽度一半的水平偏移，出现重叠。渲染与重定位的延迟不影响结果，请问问题出在哪里？预期操作后元素视觉无变化、无重叠。

最可能的原因：坐标取值错误 #

你大概率是在设置绝对定位时，误将元素的中心点坐标当作了左边缘坐标来使用。比如代码写成了：

const rect = div.getBoundingClientRect();
div.style.left = (rect.left + rect.width / 2) + 'px'; // 错误：用了中心点X坐标

而正确的写法应该是直接使用getBoundingClientRect()返回的left（元素左边缘相对于视口的坐标）：

const rect = div.getBoundingClientRect();
div.style.left = rect.left + 'px';
div.style.top = rect.top + 'px';

这种错误会导致每个元素的left被设为自身中心点的位置，元素自然会向左偏移自身宽度的一半，进而和左侧相邻元素重叠。

其他可能的排查方向 #

如果确认代码中是直接使用left值，那可以检查以下几点：

1. 验证坐标准确性：打印getBoundingClientRect()返回的left、width等值，确认left确实是元素左边缘的位置，而非中心点或其他坐标。
2. 定位参考系：给父元素body添加position: relative，让绝对定位的参考系从视口变为body（虽然默认情况下body的视口偏移为0，但部分浏览器在特殊布局下可能有差异）。
3. 盒模型设置：确保子元素的box-sizing为默认的content-box，避免因border-box导致宽度计算包含border或padding，间接影响坐标计算。

内容的提问来源于stack exchange，提问作者Случайная Котя