iframe 阻止 z-index 工作？

Question

我一直在尝试使用 z-index css 属性使一个元素始终位于另一个元素的前面，但它不起作用。一个元素的 z-index 明显大于另一个元素的 z-index，但它仍然位于另一个元素的后面。难道是因为其中一个元素（显示在前面的元素）是 iframe？还有人有其他建议吗？

Answer 1

对于那些稍后到达这里的人，正确的答案是将

position: relative;

或任何其他

position

道具放在有问题的元素上。

我的建议是将其放在与问题相关的每个元素上：

position: relative;
z-index: 0;

然后增加 iframe 前面最后面元素上的

z-index

。

如果你这样做，你很快就会开始获胜。

在我的测试中，

z-index

仅在您明确设置了

position

时才有效。通过调节

z-index

值进行测试，然后尝试通过单击鼠标突出显示屏幕上的文本。您应该看到各层按预期运行或严重错误的证据。

我发现如果您按 F12（在 Chrome 中打开开发窗格），然后单击左上角的“检查”按钮或按 CTRL + SHIFT + C，效果会非常好。然后，您可以将鼠标悬停在所有内容上，查看它们的堆叠上下文相对于相邻元素的关系。

UX 额外提示：请记住，用户可能想要复制文本，因此请确保他们可以选择它。

如果您遇到问题，很可能您是：

1. 元素的父元素上缺少

   position: relative;

   ，或者
2. 在某处失踪

   z-index: 0;

Answer 2

请记住，z-index 索引仅计算绝对元素。两个元素都应该具有位置：绝对。更多信息请参见 CSS 2.1 规范

Answer 3

要解决此问题，请将 iframe 包装在容器中，并对其应用 CSS 位置（相对、绝对、固定），z-index 为 0。例如，我遇到了一个问题，我的下拉菜单隐藏在 iframe 内容后面。通过将 iframe 包装在容器中并将其 z-index 设置为零，问题得到了解决。检查示例图像，其中除标题和下拉菜单外整个页面都来自 iframe。

<div style="position: fixed; z-index: 0;">
  <iframe title="iframe" src=" https://social.jato-live.com/members " id="iFrameResizer1" scrolling="yes" style="min-height: 90vh; min-width: 100%; overflow: auto;"></iframe>
</div>