绝对定位画线对不齐是因为起点为最近已定位祖先而非父容器左上角；父容器需设position: relative，top/left相对于其边框内侧计算，padding会影响视觉位置。
绝对定位画线为什么总对不齐？
因为 position: absolute 的起点是最近的已定位祖先（position 为 relative、absolute 或 fixed），不是父容器左上角。没给父容器加 position: relative，线条就会相对于 body 定位，一动就飘。
- 父容器必须显式设置
position: relative（哪怕只是占位） -
top/left值是相对于该祖先边框内侧计算的，不是内容区 - 若父容器有
padding，而你又按“视觉中心”估算left，大概率偏移 16px
用单个 <div> 画水平/垂直线最省事
不需要伪元素或 SVG，纯 CSS 就够。关键是把 width 或 height 设为 0，靠 border 出线——这样抗锯齿好、缩放不糊、不用管盒模型。
- 水平线：
height: 0; border-top: 1px solid #999;，再配top和left/right - 垂直线：
width: 0; border-left: 1px solid #999;，再配left和top/bottom - 别用
height: 1px+background，高 DPI 屏幕下容易发虚或消失
斜线怎么搞？transform: rotate() 是捷径但有坑
直接旋转一个细长矩形最常用，但旋转中心默认是元素中点，不设 transform-origin 就会绕着页面中央转。
- 画从左上到右下的对角辅助线：先
width: 2px; height: 500px;，再transform: rotate(45deg); transform-origin: top left; - 旋转后元素仍占据原文档流位置，记得加
pointer-events: none;，否则遮挡下方点击 - IE11 不支持
transform-origin在rotate()中用top left，得换数值如0 0
多条引导线堆一起时，z-index 和渲染顺序很关键
绝对定位元素默认 z-index 为 auto，同层叠上下文里，后写的 DOM 节点在上层。但如果你用 JS 动态插入线条，顺序就不可控。
立即学习“前端免费学习笔记（深入）”；
- 所有引导线统一加
z-index: 1（或更高），避免被其他组件（如弹窗、菜单）意外盖住 - 若线条要压在内容上但低于浮层，建议用独立的
z-index层级：比如内容层z-index: 0，引导线z-index: 2，浮层z-index: 10 - 别依赖 HTML 书写顺序来控制遮盖关系——CSS 里一个
z-index: -1就能让整条线彻底消失（藏到背景后面）
top/left 值时，没人能一眼看出哪根线偏了 2px。 
