z-index对SVG内部元素完全无效，因其渲染依赖DOM书写顺序而非CSS层叠上下文；唯一可靠层级控制方式是调整元素在<svg>中的先后位置。
z-index 对 SVG 内部元素完全无效，但对包裹 SVG 的 HTML 容器有效——关键在于分清“SVG 内部”和“SVG 外层”两个层级。
为什么给 <circle> 加 z-index 没反应
这不是浏览器 bug，是 SVG 渲染模型本身不支持 CSS 层叠上下文。所有 SVG 原生图形元素（<rect>、<path>、<text>、<g>）的绘制顺序只由它们在 <svg> 标签内的 DOM 书写顺序决定：后写的盖在先写的上面。即使你加了 position: relative 和 z-index: 999，开发者工具里会显示该属性为 “(not applicable)” 或直接灰掉。
常见误操作包括：
- 给
<svg>设置position: relative，再试图用z-index控制其子元素 —— 无效 - 对
<g>使用transform并期望它创建新堆叠上下文 —— SVG 中transform不触发层叠上下文 - 把 SVG 当成普通块级元素，套用 “父级 z-index 管控子级显隐” 的经验 —— 完全不适用
如何让文字或按钮显示在 SVG 图形上方
这是最常见的重叠需求：比如在波浪形 SVG 分隔线（<svg>）上叠加标题文本。此时你要控制的是“HTML 元素 vs 整个 SVG 容器”的层级，而非 SVG 内部。
立即学习“前端免费学习笔记（深入）”；
正确做法是：
- 给包裹 SVG 的外层容器（如
<div class="shape-wrapper">）设position: relative - 给要浮在上面的内容（如
<h2>或<button>）设position: absolute，并配z-index: 2 - 确保该内容的父容器就是那个
position: relative的 wrapper，否则定位基准会错乱 - 避免给 SVG 自身设
position: absolute后又忘了给父容器设position: relative—— 这会导致内容相对视口定位，脱离预期位置
示例结构：
<div class="section" style="position: relative;"> <svg class="wave" viewBox="0 0 1200 120" preserveAspectRatio="none">...</svg> <h2 class="title" style="position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 2;">标题</h2> </div>
SVG 作为背景图时被内容遮挡怎么办
当 SVG 用作 CSS background-image 时，它本质是背景层，天然在内容下方。但如果用 <img src="wave.svg"> 或内联 <svg> 放在 HTML 流中，就可能因定位方式导致遮挡。
排查要点：
- 检查 SVG 是否用了
position: absolute且没有设置z-index—— 它默认层叠等级可能低于后续兄弟元素 - 确认内容元素是否遗漏了
position属性：只有position不为static的元素才参与z-index排序 - 注意层叠上下文隔离：如果 SVG 父容器设置了
opacity: 0.99或transform: scale(1)，它会创建新层叠上下文，内部z-index只在这个上下文内生效 - 不要依赖
display: inline-block+vertical-align对齐 SVG 和文字 —— 行高和基线干扰会导致视觉错位，看似“遮挡”，实为定位漂移
内联 SVG 中图形错位或缩放变形
这不是层级问题，而是 viewBox 和 CSS 尺寸不匹配引发的渲染错位，常被误判为“重叠 bug”。
典型表现：
- SVG 图形被拉伸、压扁或偏出容器边缘
- 用
transform: translateX()微调后仍存在亚像素模糊或跳动 - 父容器有
padding或border，但 SVG 内容没对齐到可视区域中心
解决核心：
-
viewBox的宽高比必须与 CSS 设置的width/height严格一致；例如viewBox="0 0 100 50"就只能配width: 200px; height: 100px或aspect-ratio: 2 / 1; width: 100% - 禁用同时设置
width、height和aspect-ratio—— 浏览器行为不一致 - 给 SVG 外层容器设
display: block，SVG 自身也加display: block，避免行内对齐干扰 - 父容器慎用
box-sizing: border-box，除非你明确重置了padding和border对 viewBox 映射空间的影响
真正容易被忽略的点是：同一个页面里，SVG 内部层级靠 DOM 顺序，外部层级靠 z-index，两者互不干涉。混用时若没划清边界，调试会陷入“改了这里那边动、改了那里这边崩”的循环。
