时间轴需用position: relative容器配合明确高度（如min-height或::before伪元素），absolute节点用top百分比+transform: translateY(-50%)垂直居中，响应式仅调整top值，z-index需理清层叠上下文。
relative容器必须设为position: relative且有明确高度
时间轴的“轴线”靠relative容器撑开，但很多人只加了position: relative就以为完事——结果节点全堆在左上角，轴线根本看不见。关键在于：这个容器得有可计算的高度来源，否则absolute子元素的top、bottom会失效或塌陷。
常见错误现象：absolute节点位置飘忽、响应式断点下轴线错位、手机端时间点挤成一团。
- 用
min-height或伪元素::before撑高容器（推荐后者，不干扰语义） - 避免依赖子元素自然流式高度——
absolute子项已脱离文档流 - 如果轴线是竖线，用
border-left而非background，更易控制粗细与响应式缩放
absolute节点的定位必须用top/bottom + transform替代margin
时间点卡片用position: absolute挂到轴线上时，若用margin-top微调，一到响应式尺寸变化就会偏移失准。因为margin值是固定像素，而top配合transform: translateY(-50%)能实现真正居中且随父容器缩放自适应。
使用场景：卡片需垂直居中对齐轴线、不同屏幕下保持等距视觉节奏。
立即学习“前端免费学习笔记（深入）”；
- 每个节点设
top: 25%;（对应第1个）、top: 50%;（第2个）…比用px硬编码更可靠 - 务必加
transform: translateY(-50%);，否则top定位的是卡片顶部，不是中心 - 不要给
absolute节点设width: 100%——它会撑满整个relative容器，应显式设max-width并配合left: 100%或right: 100%控制左右侧分布
@media里重置top值比重写整个定位逻辑更轻量
响应式不是靠媒体查询里重复写一遍position: absolute，而是只调整top和transform，其他定位参数复用。否则代码膨胀、维护成本陡增，还容易漏掉某条规则。
性能影响：过多独立absolute规则会触发浏览器频繁重排；集中管理top值则只影响合成层，更高效。
- PC端用
top: 25%; 50%; 75%，平板改用top: 33.33%; 66.66%，手机直接切为单列+top: auto; bottom: 0;配合flex布局 - 避免在
@media里重新定义position或left/right——除非真要换布局模式 - 所有
top值统一用百分比，禁用px或rem，确保缩放一致性
z-index层级冲突常被忽略，尤其和sticky导航共存时
时间轴节点一旦设了absolute，默认层级高于普通文档流内容，但若页面同时有position: sticky的导航栏，很容易出现节点被遮挡或穿透导航栏的情况——这不是bug，是层叠上下文没理清。
容易踩的坑：只给时间轴容器设z-index，却忘了它的父级可能已创建新层叠上下文，导致子节点z-index失效。
- 检查时间轴容器的最近一个非
static祖先是否有z-index，有则需同步提升其值 - 导航栏用
z-index: 100，时间轴容器至少z-index: 101，节点本身不用再设（除非要压住其他absolute组件） - 慎用
z-index: 9999——数字越大越难调试，用最小必要值
top百分比如何不漂移——这时候就得放弃纯CSS，让JS辅助计算基准高度再注入CSS变量。 
