Question

我使用svg对象和一些html div元素，喜欢这个..

＆＃13;

 .layer2{
         position: absolute;
    top: 0;
    left: 180px;
    height: 100vh;
    width: 10%;
    display: block;
        background: rgba(0, 0, 0, 0.6);
   
    }

＆＃13;

<div class="show">
<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 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#ED1C24;}
</style>
<path id="XMLID_6_" class="st0" d="M300.4,287.9c-55.2,0-100,44.8-100,100c0,55.2,44.8,100,100,100c55.2,0,100-44.8,100-100
	C400.4,332.6,355.6,287.9,300.4,287.9z M300.4,437.9c-27.6,0-50-22.4-50-50c0-27.6,22.4-50,50-50c27.6,0,50,22.4,50,50
	C350.4,415.5,328,437.9,300.4,437.9z"/>
</svg>
</div>

   <div class="layer2"></div>

＆＃13;

我想将svg对象放在html元素的顶部即svg对象占有顶层。像这样 desire output image file here

desire rendering

任何人都可以提供帮助吗？

Answer 1

只需为您的SVG提供position: relative和Z-index值，如下所示：

.layer2 {
  position: absolute;
  top: 0;
  left: 180px;
  height: 100vh;
  width: 5%;
  display: block;
  background: rgba(0, 0, 0, 0.6);
}

svg#Layer_1 {
  position: relative;
  z-index: 200;
  width: 350px;
}

<div class="show">
  <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 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#ED1C24;}
</style>
<path id="XMLID_6_" class="st0" d="M300.4,287.9c-55.2,0-100,44.8-100,100c0,55.2,44.8,100,100,100c55.2,0,100-44.8,100-100
	C400.4,332.6,355.6,287.9,300.4,287.9z M300.4,437.9c-27.6,0-50-22.4-50-50c0-27.6,22.4-50,50-50c27.6,0,50,22.4,50,50
	C350.4,415.5,328,437.9,300.4,437.9z"/>
</svg>
</div>

<div class="layer2"></div>

如何将svg对象放在html元素的顶部？

1 个答案: