-1

I've made an SVG with a transparent background and I added it to the orange box in my HTML, and now I'm trying to add another element in my box (like this blue box here) with my SVG displaying onto the blue box; but no matter how big the z-index I give to my SVG and a position: relative, it wouldn't be displayed over my blue box, which is what I'm struggling to approach,

Any possible solutions would be welcome!

        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>
Zeinab
  • 66
  • 9

2 Answers2

0

Try putting this in your svg:

position:relative;
z-index:99;
laurence keith albano
  • 1,409
  • 4
  • 27
  • 59
0

This happens because your SVG has a "static" position by default. Z-index only affects elements that have a position value other than static.

In your case assigning position: relative to your SVG will help.

Add the following to your css and it will work as expected (z-index will change on hover, since you applied it to :hover)

.box svg {
  position:relative;
}
Daniel Groner
  • 173
  • 1
  • 9