묻고답하기
메인드롭메뉴가 본문게시판쓰기 뒤로 갑니다. z-index 좀 봐주세요
2012.02.18 10:33
제가 ./layouts/xe_solid_enterprise_LeCiel_v1/ 스킨을 쓰고 있습니다.
(./themes/xe_solid_enterprise/layouts/xe_solid_enterprise/ 와 거의 유사합니다)
2차메뉴를 좌측에 뿌리고 싶어서 다른 스킨 (./layouts/xe_official/)의 메뉴출력 부분을 레이아웃에 붙였습니다.
클래스이름이 겹치는 부분과 z-index를 수정하여 사용하고 있는데, 아래 그림과 같이 게시판에 글쓰기 모드로만들어가면 메인드롭메뉴가 뒤로 밀립니다.
게시판의 레이아웃을 고쳐보려고 소스를 뒤져봐도 어디에도 없네요. 어디를 고쳐야 할까요.
[아래그림설명] 아래처럼 메인드롭다운 메뉴가 페이지 본문위, 게시판리스트, 게시판 본문 글 모두 정상으로 나옵니다.
[아래그램설명] 그런데, 밑에 그림처럼 메인드롭다운 메뉴가 게시판 글쓰기에서만 뒤로 밀립니다
어디를 고쳐야 할까요?
현재 레이아웃 스킨의 z-index는 아래와 같습니다.
@charset "utf-8";
/* CSS Document */
body {font-size: 13px;font-family:'나눔고딕','NanumGothic',ng, Arial, AppleGothic; margin: 0; padding: 0;}
a { text-decoration: none; color: #000000; }
a:hover, a:focus { color: #2D648A; }
.x { clear: both; }
.line { clear: both; padding: 15px 0 0; border-bottom: 1px solid #ddd; margin: 0 0 35px; }
img{border:none;}
/* head */
#wrap {width:100%;}
#wrap .top {width:100%;height:73px;z-index:300;background:url(../images/header_bg.gif) repeat-x top left;}
#wrap .header {width:960px;height:73px;margin:0 auto;position:relative; z-index:150;}
.header .logo {margin-top:15px;float:left;}
.header ul {margin:0;padding:0;}
.header li {list-style:none;}
/* 원래거 xe_office
.body{position:relative;z-index:1;padding-bottom:30px;background:url(../images/default/bgContentBody.gif) repeat-y left top;border-bottom:1px solid #ddd;zoom:1}
.body:after{content:"";display:block;clear:both}
*/
/* 원래거 LeCiel_v1
#wrap .main {width:100%;z-index:200;}
.main .container {width:960px;position:relative;padding-top:50px;margin:0 auto 30px auto;_margin-bottom:50px;overflow:hidden;}
*/
/* Site Layout - Content Body */
#wrap .main {width:100%; z-index:200;}
.main .container {width:960px;position:relative;padding-top:30px;margin:0 auto 30px auto;_margin-bottom:50px;overflow:hidden;}
/* Site Layout - Column Left 좌측메뉴를 위해서 xe-office 레이아웃에서 붙인 소스입니다 */
.lnb{position:relative;width:211px;float:left}
.lnb h2{margin:0}
.lnb h2 a{display:block;padding:10px 0 10px 20px;text-decoration:none;color:#333}
.locNav{border-top:1px solid #ddd;padding:4px 5px;width:170px;margin:0 0 1em 0;list-style:none}
.locNav li{padding:0 0 4px 0;vertical-align:top}
.locNav li a{padding:6px 5px 6px 13px;display:block;border:1px solid #e8e8e8;border-left:0;border-right:0;background:url(../images/bgLnbOff.gif) repeat-x;color:#3e3e3e;position:relative;z-index:100;text-decoration:none}
.locNav li.active a{color:#fff;background:#de4332;border:1px solid #de4332;border-left:0;border-right:0}
.locNav li ul{display:block;position:relative;width:170px;padding:0 3px;margin:0;border-top:1px solid #fff;overflow:hidden}
.locNav li li{padding:0;border-top:1px solid #f2f2f2;position:relative;top:-1px}
.locNav li li a{padding:6px 5px 6px 10px;width:169px;color:#818181 !important;border:none;background:none !important;border:none !important}
.locNav li.active li.active a{color:#ff1a00 !important;font-weight:bold !important;background:url(../images/bulletLnb.gif) no-repeat 155px center !important}
/* Site Layout - Column Right */
.content{width:730px;float:left}
/* Site Layout - Footer */
.footer{border-top:3px solid #f4f4f4;padding:1em 0;clear:both}
.footer p{text-align:center;margin:0}
.footer a{color:#999;font-size:.9em;text-decoration:none}
/* GNB */
.header .gnb {position:absolute;top:36px; left:220px;z-index:10000;}
.gnb li.m1 {width:109px;height:35px;float:left;position:relative;}
.gnb li.m_on {background:url(../images/gnb_m1_on_n.gif) no-repeat top left;}
.gnb a {font-family:'나눔고딕','NanumGothic',ng, Helvetica, sans-serif;font-weight:bold;outline:none;ie-dummy: expression(this.hideFocus=true);}
.gnb li.m1 a.m1_a {color:#FFF;font-size:14px;line-height:14px;text-decoration:none;
display:block;width:109px;height:35px;cursor:pointer;}
.gnb li.m_on a.m1_a {color:#0f0f0f !important;}
.gnb li.m1 span.m1_span {display:block;width:109px;height:25px;text-align:center;padding-top:10px;}
.gnb .lnbg {margin:0;padding:1px 0 0 0;background:url(../images/lnb_bg.gif) no-repeat top left;}
.gnb .sub {width:106px;position:absolute;left:2px;z-index:20000; display:none;}
.gnb .lnbg .s1 {width:106px;height:32px;background: url(../images/lnb_bg.gif) no-repeat top left;}
.gnb .lnbg .s1 a {width:106px;height:24px;padding-top:8px;font-size:12px;text-align:center;color:#5e5e60;display:block;font-weight:bold;text-decoration:none;}
.gnb .lnbg .s1 a:hover {color:white;background:url(../images/lnb_bg_on.gif) no-repeat 1px 0;}
.gnb .lnbg .s1 a.a_on {color:white;background:url(../images/lnb_bg_on.gif) no-repeat 1px 0;}
.gnb .bottom {width:106px;height:3px;background:url(../images/lnb_bg.gif) no-repeat bottom left;}
.gnb .bottom span {width:0;height:0;background:#000;}
댓글 1
-
송동우
2012.02.18 10:54
-
박은미994
2012.02.19 03:17
감사합니다. header의 z-index를 바디보다 높게 250으로 고쳤더니 문제가 해결됐습니다. 절이라도 하고 싶네요. 꾸벅~
헤더속에 메뉴가 있고
바디속에 에디터가 있는 상태에서
바디의 index 값이 높을 경우
아무리 헤더속의 메뉴에 index 값을 높게 줘도 앞으로 나오지 않습니다.
메뉴를 감싸고 있는 헤더가 바디보다 index 값이 낮기 때문이죠
헤더의 index 값을 body보다 높게 설정을 해줘야 합니다.