웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
모든 브라우져는 형제간의 z-index값을 아들과 형제간의 z-index값보다 우위
2011.03.16 12:36
앞글에 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값보다 우위에 둡니다.
그럼 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값보다 우위에 둡니다.
댓글 7
제목 | 글쓴이 | 날짜 |
---|---|---|
자동으로 새로고침되게 하기 [5] | 권대건 | 2004.01.05 |
그림위에 마우스를 올렸을때 그림저장 버튼 안나타나게 하기... [17] | PHASE | 2004.01.19 |
마우스 오버시 서브메뉴 나타나게 하는방법 입니다 [12] | 키드 | 2004.01.26 |
옅은 그레이 쓸때 붉은빛 들어가는경우 [10] | 김영호 | 2004.01.29 |
nzeo처럼 배너누르면 배너다는법 나오게하기! [6] | Rollrang | 2004.02.05 |
전송버튼의 테두리를 없애 BoA요 >_< [7] | 플로렐라 | 2004.02.14 |
스타일시트를 이용한 텍스트박스 스타일 제어(밑줄,점선) [8] | 01CODE.com | 2004.02.26 |
몇 가지 팁..( 좀 깁니다.. 어느 정도 안다고 생각하시는 분들, 추천 ) [3] | naughtykidd | 2004.02.26 |
간단하게, 색깔있는 밑줄 긋기. [4] | naughtykidd | 2004.02.27 |
서브 메뉴 나타났다가 사라지게 하는 방법. 그동안의 노가다는 이젠 끝! [22] | CoolUnit | 2004.03.01 |
스타일 시트파일을 만들기 .. [4] | 박종익 | 2004.03.07 |
모든 스킨에서 중국어 간체 볼 수 있도록 해주는 법... [6] | 학몽 | 2004.03.09 |
(For 초보)폼안에 내용을 자동선택+자동복사해줍니다. [6] | 쉬드 | 2004.04.10 |
제로보드에서 손쉽게 복사하는 소스 (아래보다 더 편함..) [2] | Danggn™ | 2004.04.17 |
[tip]간단한 반투명 필터 적용법 [2] | 드래군 | 2004.04.21 |
홈페이지 빠르게하는 [로딩속도를 높히는 10가지방법] [20] | kim's | 2004.04.29 |
자동 스크롤 메뉴 (끄기 기능, 무한 스크롤 X) [6] | ☺심심 | 2004.05.02 |
허접 팁....레이어로 플래시 뺨치는 홈페이지 만들기 -추가- [17] | 남규성 | 2004.05.05 |
플래시 swf파일 배경 투명하게 하기 ~~~ [8] | kim's | 2004.05.09 |
아기창 뜨고 부모창 닫기 [6] | 임소식 | 2004.05.19 |