웹마스터 팁
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
-
위드파트너
2011.03.16 14:51
좋은거 배워갑니다. 감사합니다. -
달팽이355
2011.03.17 09:13
땡큐~~ -
웹 엔진
2011.03.23 16:09
z-index가 클수록 위에있나요?
<div>에서 z-index 어떻게 써요?..
position을 사용해야 한다던데
<div position="z-index:1;">처럼 쓰는건지?.. -
ForHanbi
2011.03.24 09:23
z-index가 클수록 위쪽에 자리 잡습니다.
position이 있어야 한다는 말은
position:relative나 position:absolute 또는 position:fixed 등과 같은 속성이 있을때 z-index는 먹힌다는 말입니다.
예문으로 하자면 #header{position:relative; z-index:1;} -
demun
2011.04.10 21:00
좋은 이야기 입니다. 근데 왜 이런 좋은 글은 안나와있는거죠?
체계적으로 잘 메뉴얼로 나와있으면 좋으련만 이런글은 찾아보기 힘든거 같아요.
좋은 글 감사합니다. -
또별
2011.04.11 00:06
크롬 레이아웃 스킨을 사용하는데요.
메인메뉴 출력관련 메인메뉴10개가 있습니다. 집pc(ie8)에서는 10개가 정상출력되는데요.
PC방의 PC에서는 메인메뉴10개중 맨 앞에것 하나만 가운데(좌우)에 출력되고 나머지 9개가 출력이 안됩니다.
혹시, 이런경우 브라우저 문제인지, CSS문제인지, z-index 문제인지 어떤 원인 인지 짐작해 볼수 있나요?
PC방의 브라우저가 뭐였는지는 모르겠네요...집pc에서는 메뉴가 잘보였는데..PC방의 pc에서 메뉴가 10개중 1개만 보여서
당혹했거든요... -
Treasurej
2011.07.16 07:54
ForHanbi님 덕분에 엄청 머리아프게 헤매던 문제가 해결됐습니다. 완전 감사해요~~~~~~^0^/
제목 | 글쓴이 | 날짜 |
---|---|---|
XE Lune_Board 의 코멘트 배경색상 수정하기 [5] | 세라오빠 | 2011.03.01 |
jQuery 강의 #1. css에 대해 이해해보자. [1] | 서기 | 2011.03.03 |
이용자가 댓글을 닉네임으로 검색할순 없나요? [2] | gc00 | 2011.03.04 |
레이아웃에 소스추가해서 트래픽보기! [2] | 막시민 | 2011.03.07 |
페이지 수정시 팝업창 높이 조절... [1] | 브레인630 | 2011.03.07 |
jQuery 강의 #2. 셀렉터에 스타일을 적용해보자. | 서기 | 2011.03.08 |
추천수와 비추천수를 합친 값을 보여주기 | lol :) | 2011.03.11 |
사진링크가 깨져서 엉망이네요 [1] | 김성회 | 2011.03.11 |
홈페이지에 퀵메뉴를 다는 소스 (ie7이상, 사파리, 불여우, 오페라 등은 position:fixed 로 고정) [20] | Firstlove | 2011.03.14 |
z-index 값 설정하기... [2] | ForHanbi | 2011.03.15 |
XE 쉬운설치에 sftp 이용하기 [6] | 비나무 | 2011.03.15 |
모든 브라우져는 형제간의 z-index값을 아들과 형제간의 z-index값보다 우위 [7] | ForHanbi | 2011.03.16 |
타이틀에 홈페이지 제목 추가 시키기 [5] | 웹 엔진 | 2011.03.17 |
xe_default 스킨 분류 색상이 정상적으로 적용/출력되지 않을 경우 [2] | 위드파트너 | 2011.03.21 |
각 게시판 헤더에 언어 변경 버튼 추가하기 [1] | cjsound | 2011.03.21 |
[PHP 기초] PHP 소개 [6] | 난다날아 | 2011.03.22 |
[PHP 기초] 사용법, 기본 문법 [8] | 난다날아 | 2011.03.23 |
[PHP 기초] 변수, 상수 [2] | 난다날아 | 2011.03.24 |
초간단 애드온 제작법 [8] | 카르마 | 2011.03.25 |
1.4.4.2부터 게시판 신규게시물 작성이 안되던 문제 [2] | 운상유희 | 2011.03.25 |