Css 单击透明的粘性iframe

我有一个网页，其中底部由一个iframe占据，我使其透明以查看重叠的元素

---

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

您可以通过css使用z索引：

z索引创建css中相关元素的列表以及编号最高的元素，例如：

#elmnt {
    z-index: 10
}

#anotherElmnt {
    z-index: 20
}

---

#elmnt

的重要性会降低，并且会被放置在具有更高z指数的

#另一个elmnt

后面，以防重叠。

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

iFrames

表示父DOM中包装的另一个完整DOM。像CSS

指针事件

这样的东西通常不会在iFrame上工作，也不会在浏览器中以相同的方式工作

您可以尝试使用

iframe>*{pointer events:none；}

影响iframe中的所有内容，但如果iframe内容跨域，则可能无法工作

指针事件：全部

不适用于其他DOM元素

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

嵌入内容的其他选项：

HTML

-

HTML

-

-最近被弃用，但有一个

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

---

最后，您可以使用Javascript调用用外部内容填充元素的内容。这基本上就是使用React/Angular/Vue构建的“单页”应用程序在幕后所做的。注意：如果您选择这条路线，请务必注意

CORS标题

，如果内容来自不同的域。

因此，iframe基本上用于包括聊天窗口，对吗？预期的结果是聊天窗口可以点击（显然），iframe其余部分后面的内容也可以点击？您能否提供一个小提琴上的工作示例，或者至少是应用程序的html结构？编辑：刚刚注意到这是6年前提出的，但是。。谁在数？：）但是他今天给了我一笔赏金所以。。。我想这还是有关系的。@scooterlord不确定你是否会得到任何答案，其他人设置了赏金而不是AskerUI，因为这看起来很奇怪。你希望iFrame元素是可点击的，但它涵盖的内容也是可点击的？这似乎不是一个很好的UI选择。