place SVG over html elements

Question

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 )?

---

in ie9 same page is ok.

Answer 1

It is certainly possible to place SVG over HTML elements (see this example).

I'm afraid I can't see your image due to firewall :(

Answer 2

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.

.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>