Question

我正在开发一个网页，由于其他div元素而将iframe作为背景，然后播放＃34;。使用z-index，它在背景区域中，可见，但我需要能够控制它，并且缺少通常存在的控件。这是主要代码：

这是html：

<div class="bg-about">
  <iframe src="https://player.vimeo.com/video/54960454?title=0&amp;byline=0&amp;portrait=0;autoplay=1"></iframe>
  <div id="iframe"></div>
</div>

这是css：

iframe {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#iframe {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}

有什么想法吗？我真的需要控件。注意：背景实际上并不落后于任何东西，但由于格式化，它必须在后台。而且我不确定为什么显示错误。

Answer 1

您正在使用#iframe覆盖视频，因此您无法翻转视频以查看控件。我只是将视频的z索引换成2，将#iframe换成1.你只是错误地用div覆盖视频。

iframe {
 position: absolute;
 z-index: 2;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 }
 #iframe {
     position: absolute;
     z-index: 1;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
}

这里是链接：https://jsfiddle.net/keinchy/asga90Lg/

带有z-index的背景中的iframe，没有菜单控件？

1 个答案: