4

我有两个相对定位的 DIV A 和 B。a 有一个 DIV 作为名为 A' 的子元素，它是绝对定位的，z-index 为 1000。 DIV B' 是 DIV B 的子元素，也是绝对定位的。

Firefox 按预期呈现：A'-B'-BA（从用户最近到最远）但是，在 IE7 中我得到：B'-BA'-A

请问有人可以帮我解决问题吗？我已经在这个问题上浪费了几个小时！

在此先感谢，斯蒂芬

4

1 回答 1

11

问题在于，在 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>
于 2009-11-05T15:10:43.300 回答