如何将SVG元素放在iframe之上？

Question

我需要将一个SVG元素放在iframe之上。

我尝试过没有成功：

• 首先在源
中使用SVG标记
• 在SVG元素上使用z-index

任何想法如何解决？

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仅适用于position属性为relative，absolute，fixed或sticky的元素的属性更改行为。 因此，将CSS position属性添加到svg元素，并将z-index设置为大于iframe z-index。

JsFiddle

Answer 2

您需要使用z-index对商品进行分层：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您只需要更改svg-element的定位和z-index：

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