父容器必须设 position: relative，否则 absolute 节点将逐级向上查找定位上下文，最终相对于 body 定位而失控；同时需设 min-height 保证轴线与节点可见且对齐。
极简水平时间轴用 position: relative 做轴线容器、position: absolute 做节点，是最轻量且可控的方案——它不依赖 Flex/Grid 的复杂逻辑，也不引入 JS 计算，但必须严格满足定位上下文条件，否则节点会飞到 body 顶部或重叠成一团。
为什么父容器必须设 position: relative
水平时间轴的“轴线”（比如一条横线）和所有节点（如圆点 + 文字）必须共享同一参考系。如果父容器没设 position: relative，所有 position: absolute 节点就会逐级向上找已定位祖先，最终相对于 body 定位，导致节点位置完全失控。
- 父容器（例如
.timeline）必须显式声明position: relative，哪怕它本身不需要偏移 - 不能靠
position: static（默认值）或未设置的父级“凑合”，这等于没提供定位上下文 - 若父容器是
flex或grid容器，仍需额外加position: relative，因为布局模式 ≠ 定位上下文
节点用 position: absolute 怎么横向排开
水平时间轴中，每个节点（.timeline-item）靠 left 值递增排列，配合固定宽度和居中对齐，才能避免文字长度差异导致错位。
- 统一设
width（如width: 160px），防止左右项因内容长短不一而挤占空间 - 用
left配合固定单位（px或rem），别用百分比——left: 20%在响应式缩放时会漂移 - 推荐用 CSS 自定义属性管理间距：
--node-gap: 120px，然后写left: calc(var(--node-gap) * 0)、left: calc(var(--node-gap) * 1)等 - 节点内文字用
text-align: center，并设transform: translateX(-50%)把左边缘对齐到left坐标点，实现真正居中
轴线（横线）怎么和节点对齐不偏移
横线通常用伪元素 ::before 实现，它和节点一样基于父容器定位，所以必须共用同一 top 值，并确保父容器有足够高度容纳所有绝对定位内容。
- 给父容器设
min-height（如min-height: 60px），否则absolute元素会溢出不可见 - 轴线伪元素写法：
.timeline::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: #ccc; } - 所有节点也设
top: 50%，再用transform: translateY(-50%)垂直居中，这样它们才和轴线严格对齐 - 别用
bottom或top混用：同一组节点必须统一用top，否则层叠顺序和视觉对齐都会乱
z-index 和响应式切换要注意什么
极简时间轴虽结构简单，但节点悬停展开、点击高亮等交互会让层叠关系暴露问题；小屏下强行保持左右分布反而更难看。
- 给所有节点设相同
z-index（如z-index: 1），避免悬停时被轴线盖住；若需高亮当前项，改用z-index: 2动态切换 - 小屏（如
max-width: 768px）直接切回单列：取消left，改用left: 50%; transform: translateX(-50%)，让所有节点垂直堆叠在轴线正下方 - 不要在媒体查询里重复写
position: absolute——它已继承，只需调left和top - 注意
transform会创建新层叠上下文，若节点内还有弹出层（如 tooltip），得在该子元素上再设z-index
最易忽略的是父容器高度和定位上下文的绑定关系：没 min-height 就看不见节点，没 position: relative 就找不到轴线——这两条不满足，整个时间轴就只是几行飘在页面顶部的零散文字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
