Как добавить встроенный svg позади объекта iframe? - PullRequest
Новая
       62

Как добавить встроенный svg позади объекта iframe?

0 голосов
/ 28 января 2019

В настоящее время я сталкиваюсь с проблемой, когда у меня есть объект Iframe, который я скрываю и показываю, и когда он скрыт, должен отображаться SVG.

как убедиться, что этот SVG находится за фреймом.

В настоящее время я добавил его, используя встроенный 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 добавляет фон

Дочерний элемент div player добавляет стиль для SVG

svg и use вставляет файл SVG, на текущий момент выше iframe

и iframe под изображением SVG ..

1 Ответ

0 голосов
/ 28 января 2019

Обычный подход к наложению двух элементов состоит в том, чтобы иметь элемент контейнера с 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>
...