parent zIndex problem IE6 and IE7_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-04 21:10 出处：网络

For my understand. I need to put div 2 in front of div 3. How can I do this in IE6 and IE7. All of others browsers works normal. Here is my code.

CSS

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

    #div2 {
        background:#C00;
        top:20px;
        left:280px;
     开发者_StackOverflow社区   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>

I have tested the following in IE6/7/8, Chrome, and Firefox. This puts #two in between #one and #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;
 }

In Action: http://www.webdevout.net/test?02C

See Internet Explorer z-index bug?.

You need to explicitly set the z-index for your "#div1". Simply set #div1 { z-index: 0; } and your problem is solved.

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

As far as I know, there is no known solution for this problem, since the #div1 gets automatically a "z-index:0" in IE7, which prevents the #div2 from overlapping #div3.

To make FF and Chrome behave more like IE7, add "z-index:0" to all elements with no "z-index" specified. This will not solve your problem, but might facilitate testing.