绝对定位+连线在复杂流程图中易失控，因节点增多导致top/left需手动硬调、坐标基准不统一、旋转偏移、文字居中失效、响应式断裂及ie兼容问题；须仅设一层relative容器，节点用absolute统一原点，连线改用transform旋转+长度计算，箭头优选border+clip-path，分支复杂时应转向svg或mermaid。
为什么绝对定位 + 连线在复杂分支流程图里容易失控
因为节点一多、分支一交叉，top/left 值就得手动硬调，稍改一个节点位置，所有连向它的线都要重算坐标。更麻烦的是：连线本身用 position: absolute 时，基准点不统一（比如有的线以左上为原点，有的以中心），旋转角度错 1° 就偏移明显；节点文字居中失效、响应式缩放后连线断裂、IE 下 clip-path 箭头直接消失——这些不是边缘 case，而是默认配置下的必然结果。
必须设 position: relative 的容器，且只设一层
最外层容器必须加 position: relative，否则所有 position: absolute 节点会相对于 body 定位，一旦页面滚动或嵌套在其他模块里，节点就“飞走”。但注意：不要嵌套多层 relative 容器——比如流程图包在 .card 里，.card 又包在 .page-content 里，两层都设了 position: relative，那子节点的 top/left 就变成相对内层容器计算，极易误判。
- 只给直接包裹所有节点和连线的最外层 div 设
position: relative - 所有节点 div 都用
position: absolute，且top/left值统一按该容器左上角为 (0, 0) 原点 - 避免用
transform: translate()替代top/left来微调节点位置——它会让后续连线计算坐标时多一层 offset 换算，徒增出错概率
连线别用 top/left，改用 transform: rotate() + width
从节点 A 右侧中点连到节点 B 左侧中点，如果写 top: 120px; left: 300px; width: 200px;，A 或 B 一挪，这条线就废了。正确做法是：先用 JS 或手算两点坐标差 Δx、Δy，然后生成一条固定宽高（如 width: 2px; height: 100vh;）的连线 div，再用 transform 控制方向与长度：
-
transform: rotate(atan2(Δy, Δx)) translateY(-50%)—— 旋转对齐方向，并把连线中点移到起点 -
width: sqrt(Δx² + Δy²)—— 控制实际长度 -
transform-origin: left center—— 确保旋转轴在连线左端，否则箭头会歪 - 箭头用
border三角形比 SVG 更轻量，但得配合clip-path: polygon(0 0, 100% 50%, 0 100%)截掉多余部分，否则 IE 不支持就留白块
分支多时，优先放弃纯 CSS，转用 SVG 或 Mermaid
5 个节点、2 条并行分支还能撑住；一旦出现循环依赖、条件判断菱形节点、自动折线避让、拖拽重排，CSS 就不是“难”，而是“不可维护”。SVG 的 <line></line> 和 <path></path> 天然支持动态坐标绑定，<marker></marker> 可复用箭头定义；Mermaid 则用文本描述生成 SVG，改流程只要改几行代码，不用碰样式和坐标。
真正容易被忽略的点是：**你花 3 小时调好一条带箭头的斜线，不如花 20 分钟接入 Mermaid，然后把时间省下来处理真实业务逻辑——比如那个“用户提交后需同步通知三方系统”的分支条件，才是流程图要表达的核心，不是连线角度。**
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
