웹마스터 팁
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^/
제목 | 글쓴이 | 날짜 |
---|---|---|
게시판 스타일이 안바뀌는 경우에 해보실 사항 [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] | 현의느낌 | 2010.02.01 |
글작성후 목록으로 이동하기 팁이 정상동작하지 않을 경우 [2] | 도라란 | 2011.07.14 |
"이 게시물을..." 추천/비추천/신고 메뉴를 버튼으로 [28] | 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] | 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 |