如何让文本显示在SVG图片上方 文本被SVG遮挡的CSS修复问题

解决方案 #

问题根因

你当前的CSS代码存在两处直接导致文本被SVG遮挡的错误：

1. z-index 设置为 -10 负值，会让元素层级低于普通文档流的默认元素，自然会被后续渲染的SVG元素覆盖
2. z-index 是纯数值属性，不需要加 px 单位，你写的 z-index: -10px 属于无效写法

修复步骤

1. 首先修改 .Default_View_Text___ 的CSS配置：

.Default_View_Text___{    
    position: relative;
    margin-top: 190px;
    margin-left: 30px;
    top:25.05%;
    z-index: 10; /* 改为正数值，删除px单位 */
    font-family: 'Poppins';
    font-weight: bold;
    font-size: 17px;
    color: #1A73E8;
}

2. 如果修改后仍存在遮挡，是因为你的DOM结构中，文本所在的div位于SVG所在的div之前，同级元素默认后面渲染的层级更高，此时给SVG的父容器添加更低的层级配置即可：

.TableCustomersBleBg__, .TablesCustomerWhiteBg__ {
    position: relative;
    z-index: 1;
}

内容的提问来源于stack exchange，提问作者Revan