必须给父容器设position: relative，否则absolute子元素会向上查找最近已定位祖先，最终相对于body或视口定位，导致所有节点堆叠在左上角或错位。
必须给父容器设 position: relative，否则所有 absolute 子项都会相对于 body 定位，节点全部堆在左上角或错位到不可见区域。
为什么父容器不设 relative 就会失控
浏览器查找定位上下文时，只认 position 值为 relative、absolute、fixed 或 sticky 的祖先。父容器若保持默认 static，absolute 节点就会一路向上找，最终落到 html 或视口上——你调 top: 2rem，结果是离页面顶部 2rem，不是离时间轴容器顶部。
常见错误现象：
-
.timeline-item全部重叠在左上角 - 节点位置随页面滚动“漂移”
- 响应式切换后节点突然跳到屏幕外
如何避免 absolute 节点堆叠或错位
多个 absolute 子项共用同一父容器时，仅靠 top 不够，必须配合显式空间控制和层叠管理：
立即学习“前端免费学习笔记（深入）”；
- 父容器必须有明确高度依据：用
min-height（如min-height: 500px）或padding预留空间，不能依赖子项撑开 - 每个
.timeline-item的top值要递增且可维护：推荐用 CSS 自定义属性统一间隔，例如--item-gap: 6rem，再写top: calc(var(--item-gap) * 0); top: calc(var(--item-gap) * 1); - 需要悬停展开内容时，必须加
z-index，否则展开层可能被后续节点遮挡 - 禁用百分比
top：动态内容导致行高变化时，top: 20%会偏移，改用rem或px
左右交替布局下 absolute 怎么写才稳
奇数项右、偶数项左的布局，不能靠同时设置 left: 0 和 right: 0，那样在宽度变化或缩放时极易错位：
- 统一用
left+transform: translateX()控制偏移：比如右侧项写left: 50%; transform: translateX(40px)，左侧项写left: 50%; transform: translateX(-320px)（假设内容宽 320px） - 所有
.timeline-item显式设相同width（如width: 280px），防止文字长度不同导致左右不对齐 - 小屏下用媒体查询切回单列：
@media (max-width: 768px) { .timeline-item { left: 50%; transform: translateX(-50%); } }，此时去掉左右逻辑，避免窄屏重叠 - 慎用
transform创建新层叠上下文：如果已加z-index还失效，检查是否被transform隔离了层叠环境
主线与节点图标怎么对齐才不飘
时间轴竖线和圆形节点图标都靠伪元素实现，但它们必须共享同一坐标系，否则视觉脱节：
- 竖线用
.timeline::before，必须配position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%)，且父容器.timeline已设position: relative - 节点图标（
.timeline-dot）用position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)，确保它始终钉在竖线中心 - 不要给节点图标设
margin或padding微调位置——这会破坏居中精度；所有偏移都走top/left+transform - 若节点需响应式缩放，优先调
font-size或width/height，别用scale()，否则transform: translate()计算会失准
真正难的不是写对几个 absolute，而是让所有节点在内容动态增减、字体加载延迟、缩放/滚动/打印等场景下仍保持像素级对齐——这意味着每个 top、left、transform 都得有明确依据，不能靠“看着差不多”。
