点击粘性、透明的 iframe答案

【问题标题】：click through sticky, transparent iframe点击粘性、透明的 iframe
【发布时间】：2012-12-21 16:07:11
【问题描述】：

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

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

【问题讨论】：

那么，iframe 本质上是用来包含聊天窗口的，对吧？聊天窗口的预期是可点击的（显然）并且 iframe 其余部分后面的内容也是可点击的？你能提供一个关于小提琴的工作示例，或者至少是你的应用程序的 html 结构吗？编辑：刚刚注意到这是 6 年前被问到的，但是.. 谁在数？ :)
好吧，但他今天设置了赏金所以......我想它仍然相关。
@scooterlord 不确定你会得到任何答案，其他人设置了赏金而不是提问者
这个界面看起来很奇怪。您希望 iFrame 元素是可点击的，而且它所涵盖的内容也是可点击的？这似乎是一个不太好的 UI 选择。

【解决方案1】：

这个问题很老了，但对于任何偶然发现它的人......

iFrames 表示包裹在父 DOM 中的另一个完整 DOM。 CSS pointer-events 之类的东西通常不适用于 iFrame 或跨浏览器的功能相同。
您可以尝试使用 iframe > * {pointer-events: none;} 影响 iframe 内的所有内容，但如果 iframe 内容跨域，则可能无法正常工作。
pointer-events: all; 旨在与 SVGs only 而非其他 DOM 元素一起使用。

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

嵌入内容的其他选项：

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

最后，您可以使用 Javascript 调用来用外部内容填充元素的内容。 这实际上是使用 React/Angular/Vue 构建的“单页”应用程序在幕后所做的事情. 注意：如果你走这条路线，如果内容来自不同的域，请务必注意CORS headers。

【讨论】：

【解决方案2】：

你可以通过css使用z-index：

z-index 创建一个 css 中相关元素的列表以及编号最大的元素，例如：

#elmnt {
    z-index: 10
}

#anotherElmnt {
    z-index: 20
}

#elmnt 的重要性会降低，并且会被置于 z-index 较高的#anotherElmnt 之后，以防重叠。

【讨论】：