Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12

[번역] 인터넷 익스플로러(IE) z-index 버그 이해하기

일단 이 글은 ‘Squish the Internet Explorer Z-Index Bug’를 번역한 것이다. 근데 글 번역으로 들어가기 전에 참고할 만한 게 하나 있어서 인용하고 시작한다.

IE And The z-index Property

만약 당신이 IE6나 IE7에서 위치지정된 구성요소들에 z-index를 사용한다면, 인덱스 스태킹[‘stacking index’, 즉 z-index 값 – 형우]은 0으로 셋팅 될 것이다. 이는 렌더링 에러를 유발한다. baker라는 사람이 말한 해결책은, 부모 요소에 [자식 요소보다 – 형우] 더 높은 z-index를 주는 것이다. 어떤 경우에는 부모 요소가 position:relative 로 할당되어야 할지도 모른다.

위 문단은 ‘IE6 커닝 페이퍼: IE6 버그 25+ 해결하는 방법’(원문)에서 인용한 것이다.

z-index에 대해 이해가 좀 있는 게 좋을 텐데, 최근에 내가 번역한 ‘z-index에 관해 아무도 말해 주지 않은 것’(원문)을 참고하면 도움이 될 거다.

그럼 이제 ‘인터넷 익스플로러 z-index 버그 뽀개기'(Squish the Internet Explorer Z-Index Bug) 번역 시작이다.


문제

최근 웹사이트를 만들던 어느 날이었다. IE 체크를 해보기 전까지는 모든 게 순조로웠다. 보통은 IE7에서도 잘 돌아간다. 그런데, 이 경우엔 치명적인 문제가 있었다. absolute 포지션을 준 div를 띄운 게 있었고(hover 메뉴), 그 아래엔 투명 PNG를 사용하는, 역시 absolute로 박아 놓은 이미지가 있었다. 이게 아래처럼 보였다.

IE z-index 버그

해법

absolute를 준 div의 z-index 값은 1000이었다. 하지만 @jorenrapini가 IE는 z-index를 제대로 사용하지 못한다고 지적해 줬다. 나는 결함을 상세히 설명하고 있는 qurksmode.org의 이 글을 우연히 발견했다.

인터넷 익스플로러에서 position 값을 가진 요소는 새로운 쌓임 맥락(stacking context)을 만들 때 z-index를 0으로 만든다. 따라서 z-index는 더이상 제대로 작동하지 않는다.

위 글은 대책을 곧바로 포함하고 있는 것은 아니지만, 같은 문제를 겪은 사람이 댓글을 남겼다.

부모 요소에 더 높은 z-index 값을 주면 버그가 해결된다.

[부모-자식 관계에서 자식 요소가 가진 z-index 값보다 높은 z-index를 부모에 주라는 이야기다. – 형우]

그래서 사이트에 다음 코드를 적용했다.

<div style="position: relative; z-index: 3000">
    <div style="position:absolute;z-index:1000;">
        <a href="#">Page</a>
        ...
    </div>
</div>
<img style="position:absolute" src="myimage.png" />

그렇게 하니 이런 결과가 나왔다.

IE z-index 버그 해결

왜 해결됐는지는 묻지 마라. 여하튼 해결됐다.

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

댓글 (2개)

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다