Html 如何在iframe对象后面添加内联svg？

我目前面临一个问题，我有一个Iframe对象，我隐藏并显示它，当隐藏时应该显示SVG

如何确保此SVG位于iframe后面

我目前正在使用内联

SVG

添加它，就像我使用

use

抓取它一样

所以我现在的情况是

<div class="player">
<div style="width: 100px;height: 100px;display: block;margin: auto;">
<svg>
<use xlink:href=".."></use>
</svg>
</div>
<div style="height: 0px; padding-bottom: 56.25%; position: relative;">
<iframe width="400" height="245" src="//https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" style="left: 0px; top: 0px; width: 100%; height: 100%; position: absolute;" id="iframe1"></iframe>
</div>
</div>

外部div

播放器

添加背景

player

的子div添加SVG的样式

svg

和

use

插入svg文件，当前位于

iframe

---

以及SVG图像下方的

iframe

叠加两个元素的正常方法是在子元素上设置一个容器元素，该容器元素具有

position:relative

，并设置

position:absolute

具有绝对定位的图元可以相对于所定位的最近祖先进行定位。这就是为什么我们在父对象上执行

position:relative

例如

.player{
位置：相对位置；
}
.player>div{
位置：绝对位置；
排名：0；
}

太好了，似乎很管用。。有没有办法在玩家类中将SVG居中？@PaulLebau没有办法将SVG居中？当然有。只需使用其中一种标准方法使元素居中即可。或者，您可以根据需要将SVG

viewBox

设置为适当的值。