出现在 IE7 和 IE8 元素下的 jQuery 模态窗口答案

【问题标题】：jQuery Modal Window appearing under elements in IE7 and IE8出现在 IE7 和 IE8 元素下的 jQuery 模态窗口
【发布时间】：2011-08-16 08:43:48
【问题描述】：

我在页面上有一个由 jquery 提供支持的模式窗口。它在 chrome、firefox 和 IE8 下完美运行，但在 IE6 和 IE7 下，窗口显示在其他元素下方且位置不正确。

这是窗口的 css：

.simple_overlay {
display: none;
z-index: 10000;
background-color: #FCFCFC;
background-image: none;
background-image: url(http://static.flowplayer.org/img/commerce/box-512.png);
padding: 20px;
width: 675px;
height: 400px;
min-height: 200px;
-moz-border-radius: 8px 8px 8px 8px;
border: 10px solid rgba(82, 82, 82, 0.698);
-moz-box-shadow: 0 0 90px 5px #000;
-webkit-box-shadow: 0 0 90px #000;
}

【问题讨论】：

剩余代码的 HTML/CSS、控制这个的 js 代码、jQuery 的版本等？
您提供的信息不足以得到好的答案。在jsfiddle.net 或您的网站上进行演示会有所帮助。

标签： javascript jquery css flowplayer

【解决方案1】：

您的 z-index 可能存在一些问题。尝试将 position:relative 放在该类上。

这是对 IE z-index 噱头的更长解释

http://annevankesteren.nl/2005/06/z-index

【讨论】：

【解决方案2】：

IE 6 和 7 每次看到非静态位置值时都会重置 z-index（“锁定在该值”）堆栈。这意味着如果您在此元素上方有 position: relative 或其他内容，则此元素将仅锁定在该层（如果没有 z-index，则为 0），并且提供的 z-index 将相对于此 z-index 处的其他元素。通过确保它是相对于整个页面而不是某个任意父级来修复它。

【讨论】：