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

Question

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

htmlinternet-explorer-7cssz-index

4

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

Firefox按预期呈现：A'-B'-B-A（从用户最近到最远）。然而，在IE7中，我得到了B'-B-A'-A。

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

提前致谢， Stephan

- Stephan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ben Lesh · Accepted Answer

问题在于，在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-index更高。

<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>