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

Question

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

Firefox按预期渲染:A'-B'-BA(从用户最近到最近)然而,在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索引高于你想要在底部的项目的父项:

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