jQuery 模態 Window 出現在 IE7 和 IE8 中的元素下

Question

我在頁面上有一個由 jquery 提供支持的模態 window。 它在 chrome、firefox 和 IE8 下完美運行，但在 IE6 和 IE7 下，window 顯示在其他元素下方和不正確的 position 中。

這是 window 的 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 放在 class 上。

這是對 IE z-index 噱頭的更長解釋

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

Answer 2

IE 6 和 7 每次看到不是 static 的 position 值時都會重置 z-index（“鎖定在該值”）堆棧。 這意味着如果你在這個元素之上有一些東西是position: relative或其他東西，這個元素將只鎖定在這一層（如果沒有 z-index，則為 0），並且提供的 z-index 將相對於此 z-index 處的其他元素。 通過確保它相對於整個頁面而不是某個任意父級來修復它。