Relative容器内Absolute定位div未处于指定位置的问题

问题分析 #

你遇到的.horaire元素偏移问题，大概率和盒模型设置、定位参考容器、像素精度计算这几个点有关：

• 如果父容器没有设置box-sizing: border-box，额外的padding/border会撑大容器，导致绝对定位的.horaire参考基准偏移；
• 若.horaire用了绝对定位，但父容器没设置position: relative，它会相对于页面根元素或上层定位元素计算top值，自然和预期的行位置不符；
• 手动计算top值时，浏览器对小数像素的取整处理可能导致累计误差，尤其是当多个.heure元素叠加时。

具体修复方案 #

1. 统一盒模型
   给所有元素添加全局盒模型设置，避免内边距/边框影响容器尺寸：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

2. 设置正确的定位参考
   确保.horaire的父容器（日历时间轴容器）设置相对定位，让.horaire的top值基于该容器计算：

.calendar-timeline { /* 替换成你的时间轴父容器类名 */
  position: relative;
}

3. 用CSS变量统一计算高度
   把小时行高度定义为CSS变量，用calc()自动计算.horaire的top值，避免手动计算误差：

:root {
  --hour-row-height: 35px;
}

.heure {
  height: var(--hour-row-height);
  /* 其他样式 */
}

.horaire {
  top: calc(var(--hour-row-height) * 12); /* 第12行的top值自动计算 */
  /* 其他样式 */
}

4. 排查溢出margin
   检查.heure元素是否有margin值，若存在会导致容器高度被额外撑开，直接移除或替换为padding：

.heure {
  margin: 0; /* 移除可能的margin */
  /* 其他样式 */
}

验证方法 #

修改后可以通过浏览器开发者工具：

• 检查.horaire的定位参考元素是否为预期的时间轴容器；
• 查看.heure的实际占用高度（包括border/padding）是否等于35px；
• 确认.horaire的top计算值是否准确对应第12行的位置。

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