当 `.horaire`（绝对定位）元素嵌套在 `.heure`（相对定位且含负上边距）内部时，其 `top` 值会基于**包含块的边框边界（border edge）** 计算，而负 `margin-top` 使内容区域下移，导致视觉位置与预期错位。核心症结在于：`margin` 不影响包含块定位基准，但会干扰子元素的视觉对齐逻辑。
在您的日历布局中，.horaire 元素使用 position: absolute 并设置 top: 420px，本意是精确对齐到第 12 行（因每行 .heure 高 35px，12 × 35 = 420）。但实际渲染时，.horaire 并未落在预期位置——根本原因在于父级 .heure 的样式中存在：
#planning .heure {
margin: -0.9px 0 0 -0.9px; /* ← 关键问题：负上边距 */
}该 margin-top: -0.9px 不会改变 .heure 的包含块（containing block）的起始位置（即其 border box 顶部仍为定位基准），但会使 .heure 内部的正常流内容（包括后续绝对定位子元素的参考原点）在视觉上“上浮”，从而造成 top: 420px 的计算起点与视觉网格脱节。
更准确地说：
- .heure 是 position: relative，因此它为子元素（如 .horaire）提供包含块；
- 包含块的顶部边界是 .heure 元素自身的 border box 顶部；
- 负 margin 仅影响 .heure 在 flex 容器中的排列位置，并不移动其 border box；
- 但您将 .horaire 直接写在 .heure 同级（即 ），而 .horaire 的父级是......（无 position），并非 .heure —— 这意味着 .horaire 实际是相对于最近的 position: relative/absolute/fixed 祖先定位。查看 HTML 结构可确认：.horaire 的直接父级是（即 .jour > div），而该已声明：
.jour > div { position: relative; /* ← 这才是 .horaire 的真正包含块！ */ background: #fff; }因此，.horaire 的 top 值是相对于这个外层
计算的。而该内部所有 .heure 元素均带有 margin-top: -0.9px，导致整个内容区域整体上移约 0.9px ×（行数），累积误差破坏了像素级对齐。立即学习“前端免费学习笔记（深入）”；
✅ 正确解决方案：移除破坏布局稳定性的负 margin，改用 border-box + border 微调或 transform 视觉修正：
#planning .heure { border: 1px solid #aaa; width: 100px; height: 35px; /* 删除危险的 margin: -0.9px ... */ margin: 0; /* 重置为 0 */ position: relative; box-sizing: border-box; } /* 若需消除相邻边框叠加的视觉加粗，可用以下替代方案 */ #planning .heure { border: 1px solid #aaa; border-bottom: none; /* 仅保留上、左、右 */ } #planning .heure:last-child { border-bottom: 1px solid #aaa; /* 底部由最后一行承担 */ }同时确保 .jour > div 的 position: relative 保持有效，并验证 .horaire 的 top 值严格按 35px × 行索引 计算（例如第 0 行 top: 0，第 1 行 top: 35，第 11 行 top: 385 → 对应 12th 行起始位置为 top: 385px，而非 420px；注意：若 top: 420px 意图覆盖 12 行，则高度应为 12 × 35 = 420px，起始 top 应为 385px）。
? 补充建议：
- 使用 CSS 自定义属性统一管理行高：--heure-height: 35px;，便于后续维护；
- 对 .horaire 添加 box-sizing: border-box 和显式 border: none，避免意外边框干扰高度；
- 在开发阶段启用浏览器开发者工具的「Layout Shift Regions」或「Paint Flashing」，直观识别定位偏差。
通过消除非语义化负 margin，回归基于标准盒模型的精准控制，即可彻底解决绝对定位日程块错位问题，实现像素级对齐的可靠日历视图。
