parent zIndex problem IE6 and IE7

Question

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

score 1 · Answer 1 · answered Jun 23 '10 at 16:08

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

But in this way you changed the html and I can´t change. Do you have another solution? — Leo, Jun 23 '10 at 20:21

score 0 · Answer 2 · edited May 23 '17 at 12:13

0

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

edited May 23 '17 at 12:13

Community

1
1

answered Jun 22 '10 at 19:35

James Sumners

14,485
10
59
77

This 2 answers do not help me. I need to put div 3 between div1 and div 2. And these answers. One put div1 in front of div3 and the other one duplicate the div and i can´t do that. Someone could help me? – Leo Jun 22 '10 at 20:02
If I explicitly #div to z-index:0 #div3 will be in front of #div2. This solution do not work. – Leo Jun 23 '10 at 20:25
Best solution, use flash! :-/ – Leo Jun 28 '10 at 13:18

score 0 · Answer 3 · answered May 19 '11 at 11:44

0

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.

answered May 19 '11 at 11:44

Janne Aukia

1,003
6
7

That's not entirely correct: in IE7 any element without an explicit zIndex is treated as 'natural progression' rendering so the implicit zIndex stack increases as you move down the page. Elements with an explicit 'position' property create a new stacking context (within the already applied implicit one) and therefore only affect their respective child elements. This is why z-index relationships in IE (upto 8) are inherently broken! It would also therefore be much more complex to replicate this behaviour in Webkit / Gecko engines than you imply! – Chris Sep 19 '11 at 11:21

parent zIndex problem IE6 and IE7

3 Answers3