Question

我有两个相对定位的DIV A＆amp; B. a有一个DIV作为子元素，叫做A'，它是绝对定位的，z-index为1000.DIV B'是DIV B的子元素，也是绝对的。

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

有人可以通过解决方法帮助我吗？我已经把这个问题浪费了几个小时！

提前致谢，斯蒂芬

Answer 1

问题是在IE7及更早版本中，它基本上“重置”相对定位项目内的z-index。

如果这些工作都没有看到下面的“最后的手段”

所以在IE中，在这种情况下，在IE7的蹩脚索引方法中，BAR将高于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-indexed高于你想要在底部的项目的父项。：

<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拉出到身体节点并将其移动到需要的位置。我强烈建议使用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>

在Internet Explorer 7中使用z-Index定位div

1 个答案: