如何让绝对定位元素B与元素C的顶部/Y轴完全重合？

你设置元素B为绝对定位后，和元素C顶部始终差约3像素无法完全重叠，核心问题出在定位基准不一致和排版属性的差异上，以下是具体的解决方法：

关键调整点 #

• 给父容器.A添加position: relative，让绝对定位的B以.A为定位基准，而非默认的页面根元素，这样B和C处于同一排版上下文
• 重置B的margin为0，因为原样式中.A pre统一设置了margin: .25em，正常流元素C的margin是父容器内的排版偏移，而绝对定位元素的margin会直接影响自身位置，两者计算逻辑不同导致偏移
• 显式设置B的top: 0，确保它紧贴父容器顶部

修改后的完整代码 #

HTML（无需改动）

<div class="A">
<pre class="B">Test</pre>
<pre class="C">Test</pre>
</div>

CSS

.A {
  position: relative; /* 设置为B的定位基准 */
}
.A pre {
  line-height: 1.3em;
  margin: .25em;
  font-size: 16px; /* 显式统一字体大小，避免浏览器默认差异 */
}
.B {
  position:absolute;
  color:red;
  margin: 0; /* 消除margin导致的偏移 */
  top: 0; /* 强制对齐父容器顶部 */
}
.C {
  //padding-left: 30px;
}

这样调整后，B和C的顶部/Y轴就能完全对齐重叠了。

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