iframe 在背景中使用 z-index，没有菜单控件？

Question

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