我制作了一个具有透明背景的SVG，并将其添加到HTML中的橙色框中，现在我正试图在我的框中添加另一个元素(如这里的蓝色框(，我的SVG显示在蓝色框上；但无论我给SVG的z-index和position: relative有多大，它都不会显示在我的蓝色框上，这就是我正在努力接近的
欢迎任何可能的解决方案！
body {
background-color: olive;
}
.box {
width: 100px;
height: 100px;
background-color: orange;
position: relative;
}
.box:hover svg {
position: relative;
z-index: 10000;
display: block;
}
.box .cover {
width: 60px;
height: 60px;
background-color: blue;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">
<div class="cover"></div>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:none;stroke:#FFFFFF;stroke-linecap:round;stroke-miterlimit:10;}
.st2{fill:#FFFFFF;stroke:#000000;stroke-linecap:round;stroke-miterlimit:10;}
</style>
<g>
<path class="st0" d="M30,54C16.77,54,6,43.23,6,30h1c0,12.68,10.32,23,23,23c12.68,0,23-10.32,23-23C53,17.32,42.68,7,30,7
C19.25,7,9.79,14.61,7.52,25.11c-0.06,0.27-0.32,0.44-0.59,0.38c-0.27-0.06-0.44-0.32-0.38-0.59C8.92,13.95,18.78,6,30,6
c13.23,0,24,10.77,24,24S43.23,54,30,54z"/>
</g>
<g>
<path class="st0" d="M30,49c-11.03,0-20-8.76-20-19.52c0-0.26,0.22-0.48,0.49-0.48c0.27,0,0.49,0.21,0.49,0.48
c0,10.24,8.53,18.57,19.02,18.57c10.49,0,19.02-8.33,19.02-18.57c0-0.26,0.22-0.48,0.49-0.48S50,29.21,50,29.48
C50,40.24,41.03,49,30,49z"/>
</g>
<g>
<g>
<path class="st0" d="M22.5,32.5c-1.93,0-3.5-2.02-3.5-4.5v-9c0-2.48,1.57-4.5,3.5-4.5S26,16.52,26,19v9
C26,30.48,24.43,32.5,22.5,32.5z M22.5,15.5c-1.35,0-2.5,1.6-2.5,3.5v9c0,1.9,1.15,3.5,2.5,3.5S25,29.9,25,28v-9
C25,17.1,23.85,15.5,22.5,15.5z"/>
</g>
</g>
<g>
<path class="st1" d="M41,28c0,2.2-1.35,4-3,4s-3-1.8-3-4v-9c0-2.2,1.35-4,3-4s3,1.8,3,4V28z"/>
</g>
<path class="st2" d="M27,1"/>
</svg>
</div>
</body>
</html>发生这种情况是因为您的SVG有一个"；静态"；位置。Z索引只影响具有非静态位置值的元素。
在您的情况下，将position: relative分配给SVG将有所帮助。
将以下内容添加到css中，它将按预期工作(z索引将在悬停时更改，因为您将其应用于：悬停(
.box svg {
position:relative;
}
试着把它放在你的svg:中
position:relative;
z-index:99;