Flex布局时间轴必须为外层容器设position: relative，否则::before画的竖线或圆点会因缺失定位上下文而飘至页面左上角；同时需确保父容器有明确高度来源，响应式切换时仅调整伪元素的left、top、width等定位参数，不改动flex布局模型。
Flex布局时间轴必须设 position: relative
所有用 ::before 画竖线或圆点的方案，一旦漏掉外层容器的 position: relative，伪元素就会脱离上下文飘到页面左上角。这不是渲染 bug，而是 CSS 定位规则本身决定的：absolute 的参照物是最近的 position 非 static 祖先。常见现象是圆点和竖线错位、点击区域偏移、响应式下突然消失。
- 必须加在时间轴最外层容器上，比如
<ol class="timeline"></ol>或<div class="timeline"> <li>如果页面已有 <code>position: sticky导航栏，建议额外加z-index: 1，否则圆点可能被遮挡 - 不要加在
.timeline-item上——它会让每个节点单独定位，竖线无法贯穿 - 奇数项用
margin-left: 64px（预留圆点+间隙+竖线距离），偶数项用margin-right: 64px - 不要用
text-align: right推日期——它只影响内联内容，对块级.timeline-date无效 - 若某项需图标或标签，单独加
margin-left: 80px，避免全局改写导致其他项错位 - 最稳方案：给外层加
min-height: 300px（按实际内容预估） - 更灵活方案：用另一个伪元素（如
::after）加padding-top: 1px强制撑高，不占视觉空间 - 绝对不要用
height: 100vh—— 页面内容超出视口后，竖线会在底部截断 - 小屏横排时，把竖线改成横线：
top: 50%+transform: translateY(-50%)+width: 100%+height: 2px - 竖线 → 横线：改
left/top、width/height，保留position: absolute和transform: translateX(-50%) - 圆点居中逻辑不变：仍是
left: -12px+transform: translateX(-50%)，只是方向从水平偏移变成垂直偏移（top: -12px+transform: translateY(-50%)） - 内容区边距统一用
margin-left（垂直）或margin-top（水平），避免混用padding导致盒模型混乱
flex-direction: column 与左右交错内容的对齐逻辑
垂直时间轴默认用 column，但左右交错（日期左/内容右、日期右/内容左）不是靠 justify-content，而是靠每个 .timeline-item 内部的 display: flex + flex-direction: row + margin-left 或 margin-right 控制。直接对整个列表用 justify-content: space-between 会导致高度塌陷或间距失控。
竖线高度失效时别硬调 height，先查父容器高度来源
.timeline::before 设了 height: 100% 却只显示几像素，根本原因不是 CSS 写错了，而是父容器高度为 auto 且子项用了 position: absolute 或 flex 后没撑起高度。伪元素的 100% 是相对父高计算的，父高为 0，它自然为 0。
响应式切换时只动定位参数，不动布局模型
从垂直切到水平时间轴，很多人重写整个 flex-direction 和 position 规则，结果媒体查询漏覆盖、动画卡顿、圆点位置跳变。正确做法是保持 Flex 模型不变，只调整伪元素和内容块的定位值。
立即学习“前端免费学习笔记（深入）”；
真正难的不是写出第一版时间轴，而是当内容长度不一、嵌套图片、加了悬停动画、又得兼容 IE11 降级时，哪条规则该删、哪条该锁死、哪条必须用 JS 补位——这些边界情况，往往在改完第三遍 transform 后才浮现。
