ie7 에서의 z-index 버그

게시자: 대문 demun 카테고리: 퍼블리셔/css 2013.05.03 19:40

스킨을 제작하다보니 어지간한 ie 버그는 알고 있어 애초에 피하는 형식으로 작업을 합니다.

이번에 드롭다운 메뉴를 만들다가 ie7에만 유독 버그가 있어 이렇게 정보를 공유합니다.


z-index 는 우선 가장 먼저 알아야할 점은 가장 위 부모의 index 의 크기 차이로 결정이 납니다.

즉 같은 형제끼리 header 와 main 이 있다고 하면 ..

.header { z-index: 2; }
.main { z-index: 1; }

이처럼 하면 정상적으로 main이 header 위에 올수 없습니다.

그런데 여기에 position:absolute 가 온다거나 하면 좀 달라질수 있습니다.

또 리스트인 ul li 가 들어가면 또 달라집니다.


역시 머리아픈 ie.....


여기서는 position의 문제. ul li 의 문제는 넘어가고, z-index 의 순서에 대해서만 이야기 합니다.

버그 이야기하면 끝이 없어요....


문제점은 다 해결이 가능한데..... 위에서 말한 z-index 가 도무지 말을듣지 않았습니다. 

심지어는 아주 무식한 방법으로 ie7에서만 작성되는 css를 볼려고 계층구도 전부에게 z-index 를 줘보았습니다.





위 사진에서 #header 과 #main 은 형제관계입니다.

#header 에 z-index:18을 줬지만 #main 의 z-index:1을 넘지못합니다.


아래 사진을 보시면 .blogMenu ul ul ul a 가 #main 아래 위치하고 있는것을 볼 수 있습니다.

아래사진은 ie7 입니다.




ie8까지 정상적으로 나오나 ie7에서 이렇듯 비정상적으로 나옵니다.

하루종일 다른것 못하고 이거 해결책만 찿다가 결국 찾았습니다.


정말이지 ie7 빨리 없어져야 합니다.

ie9까지 몽창.....

익스가 웹표준 브라우져가 빨리 됐으면 하는 바람이 간절합니다. ㅎㅎㅎㅎㅎㅎ


해결책 최상단의 #main { z-index:1; } 을 { z-index:-1; } 로 하니까 되더군요.....

왜 같은 형제끼리 index 의 순서에 의해 되는데....이건 마이너스까지 줘야하는지 도무지 모르겠네요.....


여하튼 여러분들중에서 저와 같은 고초를 겪는분들은 같은 형제에 z-indes 값에 마이너스를 줘보세요.....


댓글

  1. 2013.05.06 19:35 신고 BlogIcon suk9206  댓글주소  수정/삭제  댓글쓰기

    음..거이 다만들어 지는 군요 저기 공고 에 있는 스킨 배포 중지가 내려질 날이 머지 않아 보여 집니다
    기대하겠습니다^^ 힘내십시오~~!!

  2. 2013.06.24 14:35 신고 원더우먼  댓글주소  수정/삭제  댓글쓰기

    제가 메인이미지에 nivo slider를 사용했는데, 슬라이더 css들이 z-index가 5부터 9까지 되어 있어요. 그래서 님처럼 상단의 풀다운메뉴의 gnb부터 말단까지 z-index를 줄줄이 넣어줬는데도 ie7에서는 끝까지 뒤로 들어가 있네요. 말씀대로 nivo slider의 z-index를 -로 줄줄이 깔아줘봤는데도 안되네요...이거 nivo slider js를 사용한걸 없애지 않는한 안되는 걸까요?

  3. 2013.08.07 17:50 신고 선비니랑  댓글주소  수정/삭제  댓글쓰기

    저도 이렇게 z-index:-1 을 해서 해결됬다 싶었는데 크롬에서는 -로 감싼 레이어에 버튼이 클릭이 안되더군요... 난감...

    • 어려워 2013.12.06 13:54 신고  댓글주소  수정/삭제

      그러게말이예요 ㅠㅠ
      시킨대로 해서 되었다며 즐거워하다가 님 댓글보고 확인하니 ㅜㅜ
      아 정말 ie 싹다 없애버리고싶어요

  4. 2013.10.29 14:07 신고 따봉  댓글주소  수정/삭제  댓글쓰기

    이것때문에 엄청 고민했었는데 ㅠㅠ 님덕분에 해결됐어요 ㅠㅠ 감사감사

  5. 2014.09.11 18:20 신고 BlogIcon 물색없는세상  댓글주소  수정/삭제  댓글쓰기

    저도 이것 때문에 승질나서 모니터 뽀사버릴려다 간신히 참았습니다..ㅎㅎㅎ
    -1로 주니까 링크가 안먹고
    원래대로 주니까 위로 올라와 버리고...
    그래서 전 자바스크립트에서 강제로 -1로 했다가 다시 1로 바꾸는걸로 땜빵했네요..ㅎㅎㅎ
    아놔 그지 같은 IE!!!

    • BlogIcon 대문 demun 2014.09.15 14:50 신고  댓글주소  수정/삭제

      -1을 주면 표면보다 아래로 깔려서 배경이 아니면 사용하면 안됩니다.
      최소한 1을 주고 나머지를 그 위로 줘야합니다.

      z-index 는 숫자만 가지고 하는것이 아니라, float, position 등에 영향을 받습니다. 그렇기때문에 속성을 모두 꼼꼼이보고 수정해줘야 정상작동됩니다.