如何在 iframe object 后面添加内联 svg？

Question

我目前面临一个问题，我有一个 Iframe object，我隐藏和显示它，隐藏时应该显示 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>

外divplayer加背景

player的childdiv为SVG添加样式

svg 和 use 插入 SVG 文件，当前在 iframe

上方

和 SVG 图片下方的 iframe..

Answer 1

叠加两个元素的正常方法是使用 position: relative 的容器元素并在 child 元素上设置 position: absolute。

具有绝对定位的元素可以相对于定位的最近祖先进行定位。这就是我们在 parent.

上做 position: relative 的原因

例如

.player {
  position: relative;
}

.player > div {
  position: absolute;
  top: 0;
}

<div class="player">
  <div style="width: 100px;height: 100px;">
    <svg>
      <use xlink:href=".."></use>
    </svg>
  </div>
  <div style="height: 0px; padding-bottom: 56.25%;">
    <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>

如何在 iframe object 后面添加内联 svg？

How to add an inline svg behind an iframe object?

html

iframe

svg

background-image

xlink