Question

据我了解。我需要将div 2放在div 3之前。我怎样才能在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>

Answer 1

我在IE6 / 7/8，Chrome和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

Answer 2

请参阅Internet Explorer z-index bug?。

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

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

Answer 3

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

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

parent zIndex问题IE6和IE7

3 个答案: