在Internet Explorer 7中使用z-Index定位div [英] Positioning divs with z-Index in Internet Explorer 7

问题描述

我有两个相对定位的DIV A& B. a有一个名为A'的子元素D'，它是绝对定位的并且具有1000的Z-索引.DIV B'是DIV B的子元素并且也是绝对定位的。

Firefox按照预期呈现：A'-B'-BA（与用户距离最近）
然而，在IE7中，我得到：B'-B-A'-A

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

在此先感谢，
Stephan

解决方案

问题是，在IE7和更早版本中，它基本上重置相对定位项目内的z-index。 >如果这些工作都没有在下面看到'The Last Resort'

那么在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中第一个出现在另一个上的人。 / p>

 < 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 =barstyle =position：absolute; top：-30px; z-index：1; background：green;> 
 BAR 
< / div> 
< / div> 
< button onclick =moveThisCrapForIE7（）;>测试< /按钮> 
< script type =text / javascriptlanguage =javascript> 
 //当你的身体被完全加载时，最好把它踢掉。 
 // jQuery的$（document）.ready对此非常有用。 
 //现在我只是使用一个按钮来测试。 
函数moveThisCrapForIE7（）{
 //在这里你需要更可靠的浏览器检测，这只会得到IE7而不是IE6。 
 //我真的会推荐jQuery。它会为您节省数英里的代码。 
 if（navigator.appVersion.indexOf（'MSIE 7'）> -1）{
 //获取元素并将其移动到您想要的位置。 
 var bar = document.getElementById（'bar'）; 
 document.body.appendChild（bar）; 
 //然后，您需要使用位置
 //来确保它位于您想要的位置。 
 bar.style.top ='15px'; 
 bar.style.left ='90px'; 
 bar.style.zIndex ='3'; 
} 
} 
< / script> 
< / body> 
  

I have two relative positioned DIVs A & B. a has a DIV as child element called A' which is absolute positioned and has a z-index of 1000. DIV B' is a child element of DIV B and positioned absolute as well.

Firefox renders this as expected: A'-B'-B-A(from nearest to farest from the user) However, in IE7 I get: B'-B-A'-A

Please can someone help me out with a workaround? I've already wasted hours with this problem!

Thanks in advance, Stephan

解决方案

The issue is that in IE7 and earlier, it basically "resets" the z-index inside of relative positioned items.

If none of these work see 'The Last Resort' below

so in IE in this case the BAR would be above FOO in IE7's lame indexing method:

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

The workaround is equally lame; You have to make sure the parent of the items you want to be on top are z-indexed higher than the parents of the one you want on the bottom.:

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

OR you can swap which one comes first in the HTML causing one to be rendered over the other.

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

NOTE: This is all assuming that you're doing something with FOO and BAR that are causing them to overlap. My example clearly does not overlap so the effect would be hard to see if you copied and pasted it outright.

ADDED:

The Last Resort

To put it simply, this option sucks. But it's the only option if you absolutely must deal with this issue in IE7 and earlier.

Use JavaScript to move your div and position it where it needs to be. The basic idea here is to pull the absolute positioned div out to the body node and move it to where it needs to be. I would HIGHLY recommend using jQuery to do all of this. I made the example code without jQuery, but if you're not using jQuery yet, you should start. It will get this job done in a few lines.

<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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！