帶有 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/