绝对定位画线对不齐是因为起点为最近已定位祖先而非父容器左上角；父容器需设position: relative，top/left相对于其边框内侧计算，padding会影响视觉位置。

绝对定位画线为什么总对不齐？

因为 position: absolute 的起点是最近的已定位祖先（position 为 relative、absolute 或 fixed），不是父容器左上角。没给父容器加 position: relative，线条就会相对于 body 定位，一动就飘。

• 父容器必须显式设置 position: relative（哪怕只是占位）
• top/left 值是相对于该祖先边框内侧计算的，不是内容区
• 若父容器有 padding，而你又按“视觉中心”估算 left，大概率偏移 16px

用单个 <div> 画水平/垂直线最省事 <p>不需要伪元素或 SVG，纯 CSS 就够。关键是把 <code>width 或 height 设为 0，靠 border 出线——这样抗锯齿好、缩放不糊、不用管盒模型。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 水平线：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。