css - 点击粘性、透明的 iframe

Question

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

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

Answer 1

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

1. iFrames表示包裹在父 DOM 中的另一个完整 DOM。CSS 之类的东西pointer-events通常不适用于 iFrame 或跨浏览器的功能相同。

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

3. pointer-events: all;仅适用于SVG ，不适用于其他 DOM 元素。

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

嵌入内容的其他选项：

1. HTML <embed>-文档

2. HTML <object>-文档

3. Web 组件 HTML 导入- 最近已弃用，但有一个polyfill

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

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

Answer 2

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

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

#elmnt {
    z-index: 10
}

#anotherElmnt {
    z-index: 20
}

将#elmnt具有较低的重要性，并且#anotherElmnt在重叠的情况下将被置于具有更高 z-index 的后面。