jQuery 模态窗口出现在 IE7 和 IE8 的元素下
我在页面上有一个由 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;
}
I have a modal window powered by jquery on a page. It works perfectly under chrome, firefox and IE8 but IE6 and IE7 the window displays underneath other elements and in an incorrect position.
Here is the css for the window:
.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;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您的 z-index 可能存在一些问题。尝试将position:relative放在该类上。
下面是 IE z-index 花招的详细解释
http://annevankesteren.nl/2005/06/ z 索引
You might be having some problems with your z-index there. Try putting position:relative on that class.
Heres a lengthier explanation of the IE z-index gimmics
http://annevankesteren.nl/2005/06/z-index
IE 6 和 7 每当看到非静态的位置值时都会重置 z-index（“锁定在该值”）堆栈。这意味着，如果此元素上方有
position:relative或其他内容，则该元素将仅锁定在这一层（如果没有 z-index，则锁定为 0），并且 z提供的 -index 将相对于该 z-index 处的其他元素。通过确保它相对于整个页面而不是某个任意父页面来修复它。IE 6 and 7 reset the z-index ('locked at that value') stack every time it sees a position value that is not static. This means that if you have something above this element that is
position: relativeor something else, this element will only be locked at this layer (or 0 if there is not a z-index), and z-index provided will be relative to other elements at this z-index. Fix it by making sure it is relative to the entire page, and not some arbitrary parent.