时间轴必须用 relative + absolute 组合：父容器设 position: relative 以提供定位上下文，子项设 position: absolute 并用 top/left 精准偏移，避免重叠或失控；需显式设父容器高度、统一 item 间距、合理处理左右交替与响应式，并注意打印样式和兼容性。
时间轴的结构为什么必须用 relative + absolute 组合
纯 absolute 会让所有时间点脱离文档流，彼此重叠；纯 relative 又无法让内容块精准对齐到时间线上的固定位置。真正可控的时间轴依赖父容器设为 position: relative，子项（如每个时间点）设为 position: absolute，这样它们才能以父容器为参考系做偏移。
- 父容器（通常是
.timeline）必须设position: relative，否则absolute子元素会向上逐级找最近的相对/绝对定位祖先，最终可能相对于body偏移，完全失控 - 每个时间点（
.timeline-item）用position: absolute，配合top或left定位，数值建议用px或rem，避免用百分比——百分比在动态内容下容易错位 - 时间线本体（比如一条竖线）通常用伪元素
::before实现，并同样基于父容器定位，保证与各absolute项共用同一坐标系
如何避免 absolute 子项堆叠或错位
常见错误是多个 .timeline-item 设置了相同的 top 值，结果全部挤在同一个位置；或者忘了给父容器设高度，导致 absolute 元素溢出不可见。
- 显式设置父容器高度，例如
min-height: 300px，或用padding预留空间，不能只靠子项撑开 - 每个
.timeline-item的top值要递增，比如top: 2rem、top: 8rem、top: 14rem，推荐用 CSS 自定义属性统一管理间隔：--item-gap: 6rem - 加
z-index控制层叠顺序，尤其当时间点有悬停展开内容时，不加可能导致遮挡或交互失效 - 若时间点数量不确定，不要硬写死
top，改用 JS 动态计算并注入内联样式，或改用 Flex/Grid ——但那就不是 relative+absolute 方案了
左右交替布局时 absolute 定位怎么写更稳
很多时间轴要求奇数项在右、偶数项在左，靠 left/right 配合 transform 实现。这里容易出问题的是宽度变化导致左右项错位，或响应式下未重置定位值。
- 不要用
left: 0和right: 0同时存在，应统一用left或right+transform: translateX()微调，例如：left: 0; transform: translateX(-100%)把内容左对齐到时间线左侧 - 所有
absolute项都设相同width（如width: 280px），避免因文字长度不同造成左右不对称 - 媒体查询中，小屏下建议切回单列（
left: 50%; transform: translateX(-50%)），此时不再区分左右，而是全部居中，否则窄屏上左右项会严重重叠 - 注意
transform会创建新层叠上下文，若需z-index生效，确保它没被意外覆盖
兼容性与性能要注意什么
position: absolute 本身兼容性极好（IE6+），但和现代特性混用时容易翻车。
- 避免在
absolute元素上同时用will-change: transform和频繁动画，可能触发过多重绘，尤其在 iOS Safari 上卡顿明显 - 不要用
top: calc(50% - 20px)这类复杂表达式做垂直居中——旧版 Safari 对calc()在absolute下的支持不稳定，改用固定偏移或 JS 补偿 - 如果时间轴要打印（
@media print），absolute元素很可能消失或错位，务必加打印样式重置为position: static
实际项目里最常被忽略的是父容器的 position: relative 忘记写，或者写了但被其他规则（比如某个 UI 框架的重置样式）覆盖。调试时先检查 computed styles 里父元素的 position 是否真为 relative，再往下看子项偏移是否生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
