将 SVG 放在 html 元素上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6609114/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
place SVG over html elements
提问by Neir0
I am using SVG for some chart. But i have problem with svg popup window. As you can see on the picture html div(green bar) overlaps black popup. Is there any way to place svg over html elements(over green bar in my case )?
我正在将 SVG 用于某些图表。但我有 svg 弹出窗口的问题。正如您在图片上看到的 html div（绿色条）重叠黑色弹出窗口。有什么方法可以将 svg 放在 html 元素上（在我的情况下放在绿色条上）？
in ie9 same page is ok.
在 ie9 同一页面中是可以的。
采纳答案by El Ronnoco
It is certainly possible to place SVG over HTML elements (see this example).
将 SVG 置于 HTML 元素之上当然是可能的（请参阅此示例）。
I'm afraid I can't see your image due to firewall :(
由于防火墙的原因，恐怕我看不到您的图像:(
回答by IanS
The issue here doesn't just apply to SVGs. It's to do with element positioning. Any positioned elements (position:absolute, position:relative) are displayed in front of any non-positioned elements.
这里的问题不仅仅适用于 SVG。它与元素定位有关。任何定位元素（位置：绝对，位置：相对）都显示在任何非定位元素的前面。
.box{ width: 200px; height: 200px; }
.blue{
background-color: blue;
position: absolute;
}
.red{
background-color: red;
//position: relative; /*see what happens when you remove this*/
}<div class="box blue">
</div>
<div class="box red">
</div>