带有 z-index 的后台 iframe，没有菜单控件？

Question

由于其他 div 个元素 "playing with it"，我正在开发一个将 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;
}

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

带有 z-index 的后台 iframe，没有菜单控件？

iframe in background with z-index, no menu controls?

html

css

iframe

z-index