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

Question

我在页面上有一个由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;
}

Answer 1

您的z-index可能有一些问题。试着把position:relative放到那个类上。

这里有一个较长的解释IE z-index的花招

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

Answer 2

IE 6和IE 7每次看到一个不是静态的位置值时，都会重置z-index('锁定在该值')堆栈。这意味着如果在此元素之上有position: relative或其他元素，则该元素将仅在这一层被锁定(如果没有z-index则为0)，并且提供的z-index将相对于该z-index处的其他元素。通过确保它是相对于整个页面，而不是一些任意的父