div定位top值不符问题求助：绝对定位元素top为何与目标元素不一致？

背景代码 #

初始CSS #

#puzzle
{
 display:inline-block;
 vertical-align: top;
 /* 默认position: static; */
}

#success
{
 display: none;
 position: absolute;
 top: 235px;
 left: 130px;
 border: 3px solid blue;
 border-radius:25px;
 color: blue;
 background-color: #cfd;
 text-align:center;
 padding:40px;
 font-size:20pt;
}

执行的JavaScript代码 #

let p = puz.getBoundingClientRect();
let s = getelem("success");
s.style.left = p.left;
s.style.top = p.top;
s.style.display = "block";

执行后的DOMRect结果 #

puz.getBoundingClientRect()
DOMRect { x: 38, y: 183, ... }

document.getElementById("success").getBoundingClientRect()
DOMRect { x: 38, y: 33.833 ... }

（注：X与Left、Y与Top为同义词）

原因分析 #

1. CSS单位缺失：getBoundingClientRect()返回的top/left是不带单位的纯数值（比如示例中的183），直接赋值给element.style.top时，必须加上px单位（正确写法是s.style.top = p.top + "px"）。如果没有单位，浏览器会判定该CSS属性值无效，不会应用这个设置，此时#success的top会使用默认值auto，导致位置不符合预期。

2. 绝对定位的包含块规则：绝对定位元素的位置是相对于最近的非static定位祖先元素的包含块计算的，而getBoundingClientRect()返回的是元素相对于浏览器视口的坐标。如果#success的父元素中存在position: relative/absolute/fixed的元素，即使设置了正确的视口坐标，也会因为包含块不同而出现位置偏差。

结合你的结果来看，#success的x与#puzzle一致，但y偏差明显，核心原因是赋值时未添加px单位，导致top设置无效，元素回到了正常流中的默认位置。

内容的提问来源于stack exchange，提问作者T G