因为<path>不参与CSS定位流，只响应SVG原生属性；position:absolute必须加在<svg>或其外层HTML容器上，而非<path>自身。
为什么对 <path> 加 position: absolute 没反应
因为 <path> 不是 CSS 定位上下文的参与元素——SVG 内部所有图形元素（<path>、<circle>、<rect> 等）只响应 SVG 原生属性（如 cx、cy、d、transform），不解析 position、top、left 这类 CSS 布局属性。浏览器直接忽略这些声明，降级为无效样式。
position: absolute 应该加在谁身上
只能加在 SVG 的容器层级，即 <svg> 元素本身，或其外层 HTML 包裹容器（如 <div>）。这样才能进入 CSS 定位流：
- 若想让整个 SVG 贴右上角：给
<svg>设position: absolute; top: 0; right: 0 - 若想让 SVG 内容（比如一条波浪线）紧贴按钮下边：把
<svg>插入按钮内部，并给按钮设position: relative，再给<svg>设position: absolute; bottom: 0; left: 0; width: 100% - 不要给
<svg>同时设position: absolute和display: inline—— 后者会干扰定位参考框计算
常见翻车点：viewBox 缩放让 CSS 偏移“失真”
<svg> 有 viewBox 时，内部单位是逻辑坐标（如 0 0 100 20），而 CSS 的 top/left 是像素值。二者不直接对应，导致你写 top: 10px，实际视觉偏移可能被缩放放大或缩小。
- 避免在
<svg>上混用固定宽高（width: 200px）和viewBox—— 缩放比例由两者比值决定 - 若需精确对齐宿主元素边缘，优先用
width: 100%; height: auto，并确保viewBox比例与宿主一致 - 调试时打开 DevTools，看
<svg>的 Computed 尺寸是否符合预期；若高度为 0，大概率是父容器塌陷或没设height
absolute 包裹后点击失效？别只怪 z-index
设置了 position: absolute 的 <svg> 容器常点不到，根本原因常被误判：
立即学习“前端免费学习笔记（深入）”；
-
<svg>默认pointer-events: none，路径无填充/描边时无 hit area —— 解决：加pointer-events: visiblePainted到<svg>上 -
<path>用了fill="none"却没设stroke和stroke-width，等于“看不见也点不着” - 父容器（如
<div>）没设z-index，但兄弟元素有transform或opacity，意外创建了新层叠上下文，导致 z-index 失效范围变小
transform 或改 d 属性；CSS 定位只管“SVG 整体放在哪”，不管“里面那条线怎么摆”。这个边界划不清，问题就永远在原地打转。 
