Problem with z-index in Internet Explorer 7

i have a testcase here.

What I want to achieve is, that the blue parent element with its green child element wraps around the red element like a paper-clip. As you can see in all modern browsers this works very well - but in IE7 the green element stays in the background.

Is there a solution how I can achieve this in IE7?

EDIT: It is essential, that the green element remains as a child element of the blue one because the blue element will be animated wh开发者_运维技巧ich also takes effect on the green elements width an position.

---

Add position:relative; to the CSS where z-index is declared. It works in most cases.

In your case it would be

  #middle-container {
      width: 250px;
      height: 300px;
      background: red;
      left: 100px;
      top: 20px;
      z-index: 2;
      position: relative; /* added row to make z-index work */
      opacity: .9;
  }

  #container-behind {
      width: 220px;
      height: 110px;
      padding-left: 70px;
      background: blue;
      top: 80px;
      left: 320px;
      z-index: 1;
      position: relative; /* added row to make z-index work */
  }

---

This works in IE7

Demo: http://jsfiddle.net/dTJ4d/1

Demo 2: http://jsfiddle.net/dTJ4d/2

<div id="middle-container">    
    #middle-container
    <div id="container-behind">
        #container-behind
    </div>
    <div id="inner-behind">
        #inner-behind
    </div>
</div>

DIV
{
    padding: 10px;
    color: #FFFFFF;
}
#middle-container
{
    width: 250px;
    height: 300px;
    background: #FF0000;
    left: 100px;
    top: 20px;
}
#container-behind
{
    width: 220px;
    height: 110px;
    padding-left: 70px;
    background: #0000FF;
    top: 80px;
    left: 70px;
    z-index: -1;
    position: absolute;
}
#inner-behind
{
    width: 210px;
    padding-left: 70px;
    background: #80E64D;
    position: relative;
    z-index: 1;
    top: 75px;
    left: 50px;
}

EDIT: cleaned up a few lines of code