javascript - z 索引为 : 9999 being hidden by iframe with z-index: -1 IE8- 的 Div

Question

我有一个弹出对话框，它只是一个 div ，在不使用时有 display:none 。它适用于大多数情况，但有一种情况除外，即 iframe 中显示的另一个网站设法显示在 div 顶部。

正如标题所示，我尝试使用 z-index 但没有成功。它适用于 IE9、FF、Chrome 和 Safari。 IE8、IE7、IE6全部失败。

任何关于可能导致此问题或如何解决此问题的想法都会很棒。我无法小规模地重现该问题，这就是为什么我无法提供示例代码的原因。

我唯一的预感是它与调整 iframe 内内容的大小有关，但这种预感尚未得到验证。

Answer 1

在没有看到代码的情况下很难确定，但我怀疑您看到的是 this IE z-index bug

In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn't work correctly.

解决方案是(相对)定位弹出窗口的父元素并为其赋予较高的 z-index:

<div id="parent" style=" position: relative; z-index: 9999;">
  <div id="popup" style="z-index: 999;"></div>
</div>