Question

我可以使用div重叠iframe，因此无法点击吗？

这就是我所拥有的（并且在Firefox中无效）

以下是HTML代码：

<div class="container">
  <div class="do-not-allow-click"></div>
  <div class="iframe-container">
    <iframe width="420" height="315" src="//www.youtube.com/embed/T4-PSYiYUzQ" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

这些是CSS规则：

.container {
  position: absolute;
  top: 0;
  left: 0;
  height: 315px;
  width: 420px;
}

.do-not-allow-click {
  cursor: move;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 9999;
}

.iframe-container {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10;
}

Answer 1

当您在iFrame中嵌入YouTube链接时，默认的wmode会被窗口化，它会将z-index应用于其他所有内容并在顶部进行叠加。

要解决此问题，请将wmode=opaque附加到源网址，如此

http://www.youtube.com/embed/T4-PSYiYUzQ?wmode=opaque

因此，您的iframe代码将如下所示

<iframe width="420" height="315" src="http://www.youtube.com/embed/T4-PSYiYUzQ?wmode=opaque" frameborder="0" allowfullscreen></iframe>

请检查：overlay opaque div over youtube iframe

使用DIV重叠iframe似乎不适用于Firefox

1 个答案: