我有两个相对定位的 DIV A 和 B。a 有一个 DIV 作为名为 A' 的子元素，它是绝对定位的，z-index 为 1000。DIV B' 是 DIV B 的子元素，绝对定位为好吧。
Firefox 按预期呈现：A'-B'-B-A（从离用户最近到最远） 但是，在 IE7 中我得到： B'-B-A'-A
请问有人可以帮我解决吗？我已经在这个问题上浪费了几个小时！
提前致谢， 斯蒂芬
【问题讨论】：
标签： html internet-explorer-7 css z-index
问题在于，在 IE7 及更早版本中，它基本上“重置”了相对定位项内部的 z-index。
如果这些都不起作用，请参阅下面的“最后的手段”
所以在这种情况下，在 IE 中，BAR 会在 IE7 的蹩脚索引方法中高于 FOO：
<div style="position:relative;">
<div style="position:absolute; z-index:1000;">FOO</div>
</div>
<div style="position:relative;">
<div style="position:absolute; z-index:1;">BAR</div>
</div>
解决方法同样蹩脚；您必须确保您想要位于顶部的项目的父项的 z 索引高于您想要位于底部的项的父项。：
<div style="position:relative; z-index:2;">
<div style="position:absolute; z-index:1000;">FOO</div>
</div>
<div style="position:relative; z-index:1">
<div style="position:absolute; z-index:1;">BAR</div>
</div>
或者您可以交换 HTML 中哪个先出现，从而使一个在另一个之上呈现。
<div style="position:relative;">
<div style="position:absolute; z-index:1;">BAR</div>
</div>
<div style="position:relative;">
<div style="position:absolute; z-index:1000;">FOO</div>
</div>
注意：这一切都假设您正在使用 FOO 和 BAR 做一些导致它们重叠的事情。我的例子显然没有重叠，所以如果你直接复制粘贴就很难看到效果。
添加：
最后的手段
简单地说，这个选项糟透了。但如果您绝对必须在 IE7 及更早版本中处理此问题，这是唯一的选择。
使用 JavaScript 移动您的 div 并将其放置在需要的位置。这里的基本思想是将绝对定位的 div 拉出到 body 节点并将其移动到需要的位置。我强烈建议使用 jQuery 来完成所有这些工作。我在没有 jQuery 的情况下编写了示例代码，但是如果您还没有使用 jQuery，那么您应该开始。它会在几行内完成这项工作。
<body>
<div style="position:relative; z-index:2;">
OUTERFOO
<div style="position:absolute; z-index:1000; background:red;">
FOO
</div>
</div>
<div style="position:relative; z-index:1">
OUTERBAR
<div id="bar" style="position:absolute; top:-30px; z-index:1; background:green;">
BAR
</div>
</div>
<button onclick="moveThisCrapForIE7();">Test</button>
<script type="text/javascript" language="javascript">
// Probably best to kick this off when your body is totally loaded.
// jQuery's $(document).ready is really good for that.
// for now I'm just using a button to test.
function moveThisCrapForIE7() {
// You'll need something more reliable for browser detection here, this will only get IE7 not IE6.
// I'd recommend jQuery for everything really. It'll save you miles of code.
if(navigator.appVersion.indexOf('MSIE 7') > -1) {
// Get your element and move it to where you want it.
var bar = document.getElementById('bar');
document.body.appendChild(bar);
//Then you'll need to monkey with the location
// to make sure it's where you want it.
bar.style.top = '15px';
bar.style.left = '90px';
bar.style.zIndex = '3';
}
}
</script>
</body>
【讨论】：