How to position a SVG element on top of an iframe?

Question

I need to positioning an SVG element on top of an iframe.

I have tried with no success:

• using SVG markup first in the source
• using z-index on the SVG element

Any ideas how to solve it?

http://jsfiddle.net/kk5yb95o/

  <svg id="svg-area" width="600" height="600">
        <rect id="svg-test" width="600" height="100" fill="purple" />
    </svg>
    <div id="wrapper-bbs"></div>
<iframe id="iframe" src="http://www.cnn.com"></iframe>


#iframe {
    position:absolute;
    top:50px
}

Answer 1

z-index property change behavior only for elements with position property is relative , absolute , fixed or sticky . So, add CSS position property to svg element and set z-index bigger than iframe z-index .

JsFiddle

Answer 2

You need to use z-index to layer your items:

 #iframe { position:absolute; top:50px; z-index:1; } svg{ position:relative; z-index:2; } 

  <svg id="svg-area" width="600" height="600"> <rect id="svg-test" width="600" height="100" fill="purple" /> </svg> <div id="wrapper-bbs"></div> <iframe id="iframe" src="http://www.cnn.com"></iframe> 

Answer 3

You just need to change the positioning and z-index of your svg-element:

#svg-area {
  position: relative;
  z-index: 1;
}