点击粘性，透明的iframe

Question

我有一个网页，其中底部被iframe占据，我透明地查看重叠的元素。

虽然透明度运行良好，但重叠的链接不可点击，除非我在iFrame中将指针事件切换为无（这显然可以解决另一个问题）。我尝试在iFrame中创建一个div，覆盖“无菜单”部分，指针事件设置为所有，但它似乎不起作用。我还必须记住聊天组件是粘性的。

Answer 1

这个问题很旧，但对于任何偶然发现的人来说……

1. iFrames代表包装在父DOM中的另一个完整DOM。诸如CSS pointer-events之类的东西通常无法在iFrame上运行，或者无法在浏览器中以相同的方式运行。

2. 您可以尝试使用iframe > * {pointer-events: none;}影响iframe内部的所有内容，但是如果iframe内容跨域，则可能无法正常工作。

3. pointer-events: all;用于SVGs only而不是其他DOM元素。

OP的正确解决方案是将iFrame缩放到仅内容的大小，或者根本不使用iFrame。

其他嵌入内容的选项：

1. HTML <embed>-Docs

2. HTML <object>-Docs

3. Web Components HTML Imports-最近不推荐使用，但是有一个polyfill

这些都不是很好的解决方案，但是根据问题的不同，它们可能会起作用。

最后，您可以使用Java脚本调用以外部内容填充元素的内容。本质上，这就是使用React / Angular / Vue构建的“单页”应用程序在后台进行的操作。 注意：如果您使用这种方法，请确保CORS headers的内容来自其他域。

Answer 2

您可以通过CSS使用z-index：

z-index在css中创建有关元素的列表以及具有最大编号的元素，因此例如：

#elmnt {
    z-index: 10
}

#anotherElmnt {
    z-index: 20
}

#elmnt的重要性较低，在重叠的情况下将置于具有较高z索引的#anotherElmnt后面。