웹마스터 팁

앞글에 z-index는 position이라는 속성이 사용될때 먹힌다는 이야기를 빼먹었네요.

그럼 IE z-index Bug로 넘어가겠습니다.
과거에는 ie에서 z-index를 사용할때 왜 이러나 하는 때가 있었는데 최근에는 그걸 못느낀지라 ^^&
한번 찾아 봤습니다.

그리고 이걸 IE z-index Bug라고 이야기 해야할지 아닐지...
다른 브라우저에서는 다 먹히는 상황에서 ie만 안먹히니 Bug는 맞는거 같습니다.

그리고 그 문제 해결책을 스스로 찾다보니 앞전에 올린글과 같은 형식을 스스로 규정해서 사용한게 아닌가 싶습니다.
앞글에 올린 방식으로 이해해 간다면 IE z-index Bug를 굳이 고민할 필요는 없을거 같습니다.

일단 xe이라는 가장 큰 wrap div가 있고 그 안에
xe1, xe2, xe3이라는 div가 있고
xe1 안에는 xe1_1, xe1_2가 있고
xe2 안에는 xe2_1, xe2_2가 있고 xe3 도 같은 순으로 아들 div가 있다고 가정할때
xe1, xe2, xe3 각div에 z-index값을 3,2,1 순으로 설정하신다면 
xe2안의 xe2_1에 z-index값을 1000을 설정하시더라도
xe1 안의 xe1_1보다 아래에 놓이게 됩니다.

즉 z-index의 값을 사용하실때 형제간에 z-index값은
아들과 형제간의 z-index값보다 우위에 서게 된다는 것이지요.

z-index값으로 가장 고생하실 부분이 상단 메뉴에서 드랍되는 부분과
좌측메뉴가 본문에 가려 안보이게 되는 부분인데...

상단메뉴의 드랍되는 부분이 하단 본문에 가려서 안보일때는
상단메뉴를 바로 감싸고 있는 div(#menu)와 하단 본문(#body)과(아들과 형제)의 z-index값으로 접근하기 보다는
#header와 #body의 z-index값으로 접근하시는게 모든 브라우저에서 문제없게 작동이 됩니다.
그냥 고민하지 말고 #header{z-index:2} #body{z-index:1} 해버리면 끝난다는거죠.

이와 똑같이 좌측메뉴와 본문과의 문제도
#sub_menu와 #content와 z-index값으로 고민하기 보다는
서브의 div명인 .e1과 #content의 z-index값 설정으로 접근하시는게 편하다는 겁니다.

ie를 제외한 다른브라우저에서는 형제간에 z-index값이 없을때 아들과 형제간의 z-index값을 인정해 주고
ie만 인정을 안해주는 경우가 있지만
모든 브라우져는 형제간의 z-index값을 아들과 형제간의 z-index값보다 우위에 둡니다.

제목 글쓴이 날짜
게시판 스타일이 안바뀌는 경우에 해보실 사항 [4] coolsushi 2009.04.04
모바일과 MP3 화일 JW player 로 재생 하기 꽁수 김성곤820 2011.07.28
제로보드 XE의 세팅중 ssl사용해제방법 준돌이 2011.07.26
RefTagger (영어 성경 본문 출력기)를 설치하는 쉬운 방법 유샤인 2011.07.23
최근 댓글 위젯에 댓글 작성자 이름 표시하기 Treasurej 2011.07.22
공식 레이아웃 v2 스킨에서 롤오버 메뉴 적용하기. [6] 노기욱 2010.02.01
apache2에서 proxy 설정하기 fsfsdas 2011.02.20
cafe24에서 쉬운설치 기능을 쓰기위한 ftp 설정법 [19] file 현의느낌 2010.02.01
글작성후 목록으로 이동하기 팁이 정상동작하지 않을 경우 [2] 도라란 2011.07.14
"이 게시물을..." 추천/비추천/신고 메뉴를 버튼으로 [28] file xe촙5 2007.11.08
모든 브라우져는 형제간의 z-index값을 아들과 형제간의 z-index값보다 우위 [7] ForHanbi 2011.03.16
웹페이지에서 ICQ 번호 자동으로 추가하기... [1] 잔디 2001.01.05
비로그인시 본문대신 지정문구 보이기 [1] 도라란 2011.07.11
글에 첨부된 이미지 파일이 없을 경우, 지정 이미지를 본문에 보여주기 도라란 2011.07.11
간단한 시간제한 자료실 만들기 [2] 옥수수밭 2010.03.17
외부페이지를 레이아웃에 결합시 상단 마진폭이 벌어지는 문제 해결방법 [6] file DuRi 2010.12.17
레이아웃에서 class="header" 사용 안하기... [2] ForHanbi 2011.06.30
템플릿 변수(조건문) 팁 [1] 엘카 2011.06.19
XML필터 사용시 유효성검사에서 사용자정의 메세지 출력하기 창한이 2011.06.19
ie6 빈div 높이 조절 [2] ForHanbi 2011.06.19