Internet Explorer 7의 z- 인덱스 문제

Question

나는 테스트 케이스가 here입니다.

내가 달성하고자하는 것은 녹색 하위 요소가있는 파란색 상위 요소가 종이 클립과 같은 빨간색 요소를 둘러싸고 있다는 것입니다. 모든 현대의 브라우저에서 볼 수 있듯이 이것은 잘 작동하지만 IE7에서는 녹색 요소가 배경에 그대로 있습니다.

IE7에서 어떻게 해결할 수 있을까요?

편집 : 녹색 요소가 파란색 요소의 자식 요소로 유지되는 것이 필수적입니다. 파란색 요소가 애니메이션되고 녹색 요소의 너비와 위치에 영향을주기 때문입니다.

Answer 1

z- 색인이 선언 된 CSS에 position:relative;을 추가하십시오. 대부분의 경우 작동합니다.

귀하의 경우에는

는이 IE7에서 작동

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

Answer 2

것

데모 : 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; 
} 

E DIT : 몇 줄의 코드를 정리했습니다.