웹마스터 팁

앞글에 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값보다 우위에 둡니다.

제목 글쓴이 날짜
HTML/CSS/JSCRIPT Reference for IE5.0 and above [5] 송인석 2002.08.20
HTML과 CSS 사전을 만들어 보았습니다. [7] 01CODE.com 2002.08.20
[초보-하드코딩] 소스정리 팁 몇가지... [23] 안데르센 2002.08.19
[HTML 초보자] HTML 문단 P태그에 대해서 알아봐요..^^ [5] ZipShin 2002.08.18
웹 폰트 적용 시키기 - 초보자용 - [13] 하지메 2002.08.18
[HTML]::HTML소스를 쉽게! 그대로 표시하게 하잣!! [3] Smileru™ 2002.08.17
테이블에 마우스 커서 올리면 배경색 변하게 하기 [7] file Eccen 2002.08.17
[HTML 초보자] HTML HeadLine태그(H1,H2..) [6] ZipShin 2002.08.16
그린 커뮤니티 강의 - 뉴스티커 만들기 [10] file 그린 2002.08.15
깔끔한 홈페이지를 만들고 싶다면 꼭 알아야 할 것(2) [9] 키르(SP) 2002.08.15
깔끔한 홈페이지를 만들고 싶다면 꼭 알아야 할 것(1) [5] 키르(SP) 2002.08.15
[HTML 초보자] HTML 물리적태그와 논리적태그(글자진하게 등등) [5] ZipShin 2002.08.14
사용자의 윈도 화면배색을 쓰자.. [4] 엔카일 2002.08.13
[Siren]소스보기 금지된 페이지 저장하기! (강좌가 아닌가..;;) [15] 세이렌 2002.08.12
[HTML 초보자] HTML 폰트 태그 [2] ZipShin 2002.08.12
레이어에 스크롤바 달기(예제보기 제거) [13] TheMics 2002.08.09
[HTML 초보자] HTML 홈페이지의 태그 기본구조2. [13] ZipShin 2002.08.09
HTML에서 태그 베끼기 [4] 미키 2002.08.09
중간 점 찍기 [12] 오픈소스 2002.08.08
[HTML 초보자] HTML 홈페이지의 태그 기본구조. [4] ZipShin 2002.08.07