我们可以为 SVG 标签提供更高的 z-index 吗？

Question

我制作了一个具有透明背景的 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>

Answer 1

尝试将其放入您的 svg 中：

position:relative;
z-index:99;

Answer 2

发生这种情况是因为您的 SVG 默认具有“静态”位置。 Z-index 只影响位置值不是静态的元素。

在您的情况下，将 position: relative 分配给您的 SVG 会有所帮助。

将以下内容添加到您的 css，它将按预期工作（z-index 将在悬停时改变，因为您将其应用于 :hover）

.box svg {
  position:relative;
}

我们可以为 SVG 标签提供更高的 z-index 吗？

Can we give higher z-index to an SVG tag?

html

css

svg

z-index