父zIndex问题IE6和IE7

对于我的理解。我需要把div 2放在div 3前面。我怎样才能在IE6和IE7中做到这一点。所有其他浏览器工作正常。这是我的代码。父zIndex问题IE6和IE7

CSS

div { 
     position:absolute; 
    } 
    #div1 { 
     background:#0F9; 
     top:0; 
     left:0; 
     width:500px; 
     height:400px; 
    } 

    #div2 { 
     background:#C00; 
     top:20px; 
     left:280px; 
     width:100px; 
     height:100px; 
     z-index:3; 
    } 

    #div3 { 
     background:#006; 
     top:10px; 
     left:10px; 
     width:300px; 
     height:200px; 
     z-index:2; 
    }

Código

<div id="div1"> 
    <div id="div2"></div> 
</div> 

<div id="div3"></div>

来源

2010-06-22 Leo

见Internet Explorer z-index bug?。

您需要明确地为您的“”设置z-index。只需设置#div1 { z-index: 0; }并解决您的问题。

http://www.webdevout.net/test?01c

来源

2010-06-22 19:35:39

这2个答案不帮我。我需要把div 3放在div1和div2之间。而这些答案。一个把div1放在div3的前面，另一个复制div，我不能这样做。有人可以帮助我吗？ – Leo 2010-06-22 20:02:20

如果我明确指定#div为z-index：0＃div3将位于＃div2前面。此解决方案不起作用。 – Leo 2010-06-23 20:25:08

最好的解决方案，使用闪光灯！： -/ – Leo 2010-06-28 13:18:26

我已经测试在IE6/7/8，铬，和Firefox以下。这使#two在#one和#three之间

HTML：

<html lang="en"> 
    <head> 
    <title>Test</title> 
    </head> 
    <body> 
    <div id="content"> 
     <div id="one">One</div> 
     <div id="two">Two</div> 
     <div id="three">Three</div> 
    </div> 
    </body> 
</html>

CSS：

#one{ 
    background-color: #f1f1f1; 
    position: absolute; 
    left:105px; 
    top:155px; 
    z-index: 0; 
} 
#two{ 
    background-color: #c9c9c9; 
    position: absolute; 
    left:100px; 
    top:145px; 
    z-index: 1; 
} 
#three{ 
     background-color: #888888; 
     color: #f1f1f1; 
     position: absolute; 
     left:95px; 
     top:135px; 
     z-index: 2; 
}

在行动：http://www.webdevout.net/test?02C

来源

2010-06-23 16:08:19 HurnsMobile

但是用这种方法你改变了html，我不能改变。你有另一种解决方案吗？ – Leo 2010-06-23 20:21:10

据我所知，不存在用于已知的解决方案这个问题，因为＃div1在IE7中自动获得一个“z-index：0”，这可以防止＃div2重叠#div 3。

要使FF和Chrome的行为更像IE7，请将“z-index：0”添加到没有指定“z-index”的所有元素。这不会解决您的问题，但可能有助于测试。

来源

2011-05-19 11:44:21

这不完全正确：在IE7中，没有显式zIndex的任何元素都被视为“自然进展”呈现，因此隐式zIndex堆栈随着您向下移动页面而增加。带有显式“位置”属性的元素会创建一个新的堆叠上下文（在已应用的隐式上下文中），因此仅影响其各自的子元素。这就是为什么IE中的z-index关系（高达8）内在地被打破了！因此，在Webkit/Gecko引擎中复制这种行为比你所暗示的要复杂得多！ – Chris 2011-09-19 11:21:32

父zIndex问题IE6和IE7

回答

相关问题