iframe 阻止 z-index 工作？答案

【问题标题】：iframe preventing z-index from working?iframe 阻止 z-index 工作？
【发布时间】：2011-12-28 20:11:51
【问题描述】：

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

【问题讨论】：

【解决方案1】：

对于那些稍后到达这里的人，正确的答案是将position: relative; 或任何其他position 道具放在有问题的元素上。

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

position: relative;
z-index: 0;

然后在 iframe 前面的最后一个元素上增加 z-index。

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

在我在这里的测试中，z-index 仅在您明确设置了position 时才有效。通过调整z-index 值来测试它，然后尝试通过单击鼠标突出显示屏幕上的文本。您应该会看到层的行为符合预期或非常不正确的证据。

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

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

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

【讨论】：

【解决方案2】：

请记住，z-index 索引只计算绝对元素。两个元素都应该有位置：绝对。更多信息在CSS 2.1 Specification

【讨论】：