Проблема с z-index в Internet Explorer 7

Question

у меня есть тестовый пример здесь .

Я хочу добиться того, чтобы синий родительский элемент с его зеленым дочерним элементом обернул вокруг красного элемента как скрепку для бумаг.Как вы можете видеть во всех современных браузерах, это работает очень хорошо - но в IE7 зеленый элемент остается на заднем плане.

Есть ли решение, как мне добиться этого в IE7?

РЕДАКТИРОВАТЬ:Важно, чтобы зеленый элемент оставался дочерним элементом синего, потому что синий элемент будет анимирован, что также влияет на ширину зеленых элементов на позицию.

Answer 1

Это работает в IE7

Демо: http://jsfiddle.net/dTJ4d/1

Демонстрация 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;
}

РЕДАКТИРОВАТЬ: убрал несколько строк кода

Answer 2

Добавьте position:relative; в CSS, где объявлен z-index. Это работает в большинстве случаев.

В вашем случае это будет

  #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 */
  }