CODEWITHSUNDEEP
htmlsvg
Neir0
Neir0

Reputation: 13377

place SVG over html elements

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.

enter image description here

enter image description here

Upvotes: 6

Views: 31950

Answers (2)

IanS
IanS

Reputation: 1604

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>

Upvotes: 9

El Ronnoco
El Ronnoco

Reputation: 11912

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 :(

Upvotes: 6

Related Questions