Question

我目前面临的一个问题是，我有一个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添加背景

player的子div添加了SVG的样式

svg和use将SVG文件插入iframe上方的当前位置

和SVG图片下方的iframe。

Answer 1

覆盖两个元素的通常方法是使用一个带有position: relative的容器元素，并在子元素上设置position: absolute。

具有绝对定位的元素可以相对于所定位的最近祖先进行定位。这就是为什么我们在父级上执行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对象后面添加内嵌svg？

1 个答案: