我的 Web 应用程序中有一个信息弹出模式，它基本上只是一个 <div>其“display”CSS 属性设置为“none”。当模式需要出现时，一段 JavaScript 会切换显示属性。
在大多数可以激活此模式的地方，它都可以正常工作。然而，站点上有一个页面，其中一些旧的 YUI 代码以“YAHOO.widget.Panel”对象的形式显示了一个模态。当有人触发此 YUI 模态内的信息事件时，我需要我的信息模态仍显示在 YUI 模态之上。
这在除 IE 之外的所有浏览器中都可以正常工作。然而，在 IE 中，信息模式完全隐藏，因为它出现在 YUI 模式的后面。
StackOverflow 上有许多问题与 IE 中的“z-index”CSS 问题有关，但其中大部分似乎与初始页面加载时的布局问题有关。我遇到的问题是在页面加载后即时创建 YUI 面板。
无论我为我的信息模态设置多高的 z-index(或者我告诉 YUI 为它的模态设置多低的 z-index)...IE 总是给 YUI 面板一个更高的 z-index 因为它是后来创建的。
对于这种情况是否有任何干净的解决方法...您需要 IE 为 <div> 提供更高的 z-index在页面加载时创建的比在页面加载之后由 JavaScript 创建的要好？
最佳答案
为了面板在页面上的位置很重要，YUI 面板可能被附加到正文中。当你调用YUI面板的.render()方法时，指定parent div和你的popups的parent div一样，
yuipopup.render('infodivparent');
这将确保 z-indexes 正常工作。
即从这个改变，
<body>
<div id="yui_panel" style="z-index: 2;"></div>
<div id="content" style="z-index: 1;">
<div id="mypopup" style="z-index: 100"></div>
</div>
</body>
对此，
<body>
<div id="content" style="z-index: 1;">
<div id="mypopup" style="z-index: 100"></div>
<div id="yui_panel" style="z-index: 2;"></div>
</div>
</body>
我还应该注意，时间从来不是决定 DOM 如何处理节点的因素。什么时候添加没有任何意义，只有添加的地方。
关于javascript - 解决 IE z-index 问题以将模态*放在* YUI 面板之上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7728619/