ie7 이하 버전에서의 z-index 버그 > html

ie7 이하 버전에서의 z-index 버그

작성일 12-05-31 18:51

작성자서방님 조회 116회 댓글 1건

은근히 짜증나는 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버전 이하에서는 그렇지가 않다.

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가 다른 요소들을 덮어버리도록 만들어 줄 수 있다.

서방님
작성일 12-05-31 18:52