<pre><code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<style>
.back{width: 1000px;height: 1000px;z-index: 1;position: fixed;top: 0px;
left:0px;opacity: 0.5;filter: alpha(opacity=50);background-color: Black;}
#main
{margin: 100px 0 0 100px;width: 500px;position: absolute;background-color: Aqua;}
#div1 {background-color: yellow;z-index:2;position: relative;}
#div2 {background-color: yellowgreen;}
#div3 {position: relative;}
</style>
</head>
<body>
<div id="main">
<div id="div1">
<div>
<input value="0000" />
</div>
</div>
<div id="div2">
<div>
<input value="1111" />
</div>
<div class="back">
</div>
</div>
</div>
<div id="div3">
<input value="222" />
</div>
</body>
大家好，除了 div2，我需要用 div class='back' 重叠，但 IE7 也显示 div3。它应该看起来像弹出窗口。替代方案是克隆 div2 并将其附加到正文，但我不喜欢这个想法。
最佳答案
有一个 z-index bug in IE7使用相对定位的元素时。有一个 non-JS solution您可以尝试(虽然由于制作的缘故并不容易)，但也有一个简单的 JS 解决方案。
您可以在 this fiddle 中查看工作示例.
jQuery 函数是这样的:
if (document.all && !window.opera && window.XMLHttpRequest) {
$(function() {
var zIndexNumber = 1000;
$('div,p,li').each(function() {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});
}
它会检查您是否在使用 IE(您可以使用 conditional comments 调用脚本)，如果是，它会循环遍历 div，并在每个循环中设置较低的 z-index。
现在您的输入框在 IE7 中位于 .back 后面。
关于html - IE 7 z-index，在另一个堆栈中重叠 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8008683/