z-index 对 SVG 内部元素完全无效，因其渲染依赖 DOM 书写顺序而非 CSS 层叠上下文；唯一可靠层级控制方式是调整元素在 中的先后位置。
z-index 对 SVG 内部元素（如 <rect></rect>、<text></text>、<g></g>）完全无效，不是 bug，是 SVG 渲染模型本身不支持 CSS 层叠上下文。 它走的是 SVG 自己的绘制顺序逻辑，和 HTML 的 z-index 无关。强行加 z-index 不会报错，但开发者工具里会显示为 “(not applicable)” 或直接灰掉。
SVG 元素不响应 z-index 的根本原因
SVG 是基于 XML 的矢量图形语言，它的渲染顺序由 DOM 节点在 <svg></svg> 根下的**书写顺序**决定：后出现的元素自动盖在先出现的元素之上。这个规则硬编码在 SVG 规范中，不经过 CSS 的层叠上下文计算流程。哪怕你给 <circle></circle> 加了 position: relative 和 z-index: 9999，浏览器也会忽略——因为 SVG 原生元素默认不是“定位元素”，且 SVG 容器本身不创建可被 z-index 影响的包含块。
常见误操作包括：
- 给
<svg></svg>设置position: relative后，再给内部<path></path>加z-index—— 无效 - 用
transform移动<g></g>并期望它因此获得新堆叠上下文 —— SVG 中transform不触发层叠上下文（这点和 HTML 元素不同） - 把 SVG 当成普通 HTML 块去套用“父级 z-index 控制子级显隐”的经验 —— 完全不适用
如何真正控制 SVG 内部元素的层级
唯一可靠的方式是调整它们在 <svg></svg> 中的 DOM 顺序。想让某个 <text></text> 显示在最上层？把它移到所有其他图形元素之后。想让它沉底？移到最前面。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 用 JavaScript 动态调整时，优先用
.appendChild()把目标元素挪到末尾，而不是改样式 - 避免用
display: none隐藏 SVG 子元素后再 show —— 这会破坏原有顺序；改用opacity: 0或visibility: hidden - 如果必须复用同一组图形但切换层级，考虑用两个独立的
<g></g>分组，通过 JS 交换它们的.parentNode.insertBefore()位置 - 注意：CSS
paint-order只影响单个 SVG 元素内部填充/描边/标记的绘制顺序，不能跨元素控制层级
什么时候 z-index 看似“生效”了？警惕假象
如果你发现给 SVG 外层容器（比如包裹 <svg></svg> 的 <div>）加了 <code>z-index 后，整个 SVG 似乎“浮起来了”，那其实是该 <div> 在 HTML 层级中获得了更高堆叠顺序，和 SVG 内部结构无关。此时若 SVG 里有两个重叠的 <code><circle></circle>，它们之间的遮挡关系依然只由 SVG 内部 DOM 顺序决定。
容易混淆的场景：
-
<div style="z-index: 10"><svg><circle></circle><rect></rect></svg></div>——z-index控制的是这个<div> 相对于其他 HTML 元素的位置 <li> <code><svg><circle style="z-index: 100"></circle><rect></rect></svg>——z-index被完全忽略，层级由<circle></circle>在前还是<rect></rect>在前决定 - 用
<foreignobject></foreignobject>嵌入 HTML 元素进 SVG —— 这些 HTML 元素可以响应z-index，但仅限于其自身所在的<foreignobject></foreignobject>小环境内
真正麻烦的地方在于：错误地依赖 z-index 会让问题延迟暴露。比如开发阶段 SVG 结构简单，DOM 顺序刚好符合预期；等业务叠加动画、动态插入、条件渲染后，顺序一乱，遮挡就突然发生，而你还在检查 CSS 是否漏写了 position。记住，SVG 没有“层叠上下文”的概念，只有“绘制顺序”。
