IE7 Z-INDEX 문제

2013. 2. 14. 13:59

언제나 처럼 어디까지나 나만을 위한 포스팅 되겠다.

이번에 할거는 하다보면 은근히 짜증나는 ie7이하 버전에서의 z-index 오류 되겠다.

아래와 같은 코드가 있다고 할 때

<head>

<title>Untitled Page</title>

.motherDiv {position:relative; height:100px;}

.childrenDiv {position:absolute; width:100px; height:200px; background-color:red; z-index:20; top:0; left:0;}

</style>

</head>

<body>

<div id="firstDiv" class="motherDiv">motherDiv

<div class="childrenDiv">childrenDiv</div>

</div>

<div id="secondDiv" class="motherDiv">motherDiv

</div>

<div id="thirdDiv" class="motherDiv">motherDiv

</div>

</body>

class="childrenDiv"의 z-index가 20이고 나머지 객체들은 z-index 가 없기 때문에 class="childrenDiv"객체가 최상위로 올라와야 하는것이 정상인데 유독 7버전 이하에서는 그렇지가 않다.

▲ ie7

▲ ie8

▲ ie9

▲ ie10

8~10 버전 까지는 childrendDiv 가 motherDiv를 잘 덮어주고 있는데 7버전만 독야청청 motherDiv가 위로 튀어올라온다.

사실 이 문제는 position:relative요소가 position을 사용한 요소를 감싸게 되면 해당 요소의 z-index값을 0으로 만들어 버리기에 생기는 버그이다.

즉 백날 childreDiv에 z-index를 줘도 부모요소가 relative라면 그거 무시되고 z-index가 0이 되어버린다는 이야기 이다.

그래서 나같은 경우는 부모 객체의 z-index를 높여주는 해결법을 주로 사용한다.

스타일 태그에 아래와 같이 세줄을 추가하면

#firstDiv {z-index:3}

#secondDiv {z-index:2}

#thirdDiv {z-index:1}

ie7 버전에서도 정상적으로 childrenDiv가 다른 요소들을 덮어버리도록 만들어 줄 수 있다.

하루동안 보이지 않기 (3)	2013.07.28
IE7 문제점 해결: z-index, 리스트 계단현상, Hack, hasLayout (0)	2013.02.14
IE를 버전별로 볼 수 있는 IEtester (0)	2013.01.31
DTD (0)	2013.01.31
IE 호환성보기 차이점 (0)	2013.01.10

ndlessrain