jQuery 模态 Window 出现在 IE7 和 IE8 中的元素下

Question

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;
}

Answer 1

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

Answer 2

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: relative or 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.