因为不参与css定位流，只响应svg原生属性；position:absolute必须加在或其外层html容器上，而非自身。

为什么对 <path></path> 加 position: absolute 没反应

因为 <path></path> 不是 CSS 定位上下文的参与元素——SVG 内部所有图形元素（<path></path>、<circle></circle>、<rect></rect> 等）只响应 SVG 原生属性（如 cx、cy、d、transform），不解析 position、top、left 这类 CSS 布局属性。浏览器直接忽略这些声明，降级为无效样式。

position: absolute 应该加在谁身上

只能加在 SVG 的容器层级，即 <svg></svg> 元素本身，或其外层 HTML 包裹容器（如 <div>）。这样才能进入 CSS 定位流： <ul> <li>若想让整个 SVG 贴右上角：给 <code><svg></svg> 设 position: absolute; top: 0; right: 0

若想让 SVG 内容（比如一条波浪线）紧贴按钮下边：把 <svg></svg> 插入按钮内部，并给按钮设 position: relative，再给 <svg></svg> 设 position: absolute; bottom: 0; left: 0; width: 100%

不要给 <svg></svg> 同时设 position: absolute 和 display: inline —— 后者会干扰定位参考框计算

常见翻车点：viewBox 缩放让 CSS 偏移“失真”

<svg></svg> 有 viewBox 时，内部单位是逻辑坐标（如 0 0 100 20），而 CSS 的 top/left 是像素值。二者不直接对应，导致你写 top: 10px，实际视觉偏移可能被缩放放大或缩小。

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

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

下载

• 避免在 <svg></svg> 上混用固定宽高（width: 200px）和 viewBox —— 缩放比例由两者比值决定
• 若需精确对齐宿主元素边缘，优先用 width: 100%; height: auto，并确保 viewBox 比例与宿主一致
• 调试时打开 DevTools，看 <svg></svg> 的 Computed 尺寸是否符合预期；若高度为 0，大概率是父容器塌陷或没设 height

absolute 包裹后点击失效？别只怪 z-index

设置了 position: absolute 的 <svg></svg> 容器常点不到，根本原因常被误判：

• <svg></svg> 默认 pointer-events: none，路径无填充/描边时无 hit area —— 解决：加 pointer-events: visiblePainted 到 <svg></svg> 上
• <path></path> 用了 fill="none" 却没设 stroke 和 stroke-width，等于“看不见也点不着”
• 父容器（如 <div>）没设 <code>z-index，但兄弟元素有 transform 或 opacity，意外创建了新层叠上下文，导致 z-index 失效范围变小 真正要动 SVG 内部图形的位置，用 transform 或改 d 属性；CSS 定位只管“SVG 整体放在哪”，不管“里面那条线怎么摆”。这个边界划不清，问题就永远在原地打转。