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

Question

我正在开发一个网页，由于其他 div 元素“玩弄它”，因此将 iframe 作为背景。 使用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/