묻고답하기

  2. Support
  3. 묻고답하기

position속성만 주면 input박스가 보이면서 레이어와 겹쳐보입니다...

2009.01.26 22:19

B.G.M^^

안녕하세요

어떻게 설명을 드려야할지 몰라서... 답답하네요...

input박스가 있고 그위에 레이어가 있습니다.

input박스를 포함하는 레이어에
position속성만 주면 그 위에 나타나는 레이어가 input박스영역이 보이면서 겹쳐보이게 됩니다.. 아래 예제파일 참고 해주세요..

position속성을 없애버리면 자연스럽게 input박스 위에 레이어가 잘 덮이게 됩니다..

아... 예를들면... 네이버 메인홈페이지에 실시간급상승 검색어 부분을 마우스로 올리면..

1-10위 까지 순위가 나타나는 레이어가 나타나는데...

아래 부분에 로그인 input박스가 자연스럽게 가려 집니다...

근데... 저에게 지금 발생하고 있는 문제가 레이어 부분이 로그인 input박스 부분을 잘가려야 하는데 input박스가 그냥 나타나 버립니다.

position속성만 들어가면 이런 현상이 나타나네요...
꼭 position속성을 사용해야하는데..
왜 이런현상이 발생하는지요?
어떻게 해결할 방법이 없을까요..ㅠㅠ

id="XXXXXXXXXX"가 position속성을 가질때 나타나는 현상
##################################################
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>제목 없음</title>
<meta name="generator" content="Namo WebEditor v6.0">

<script language="JavaScript">
<!--
function na_hide_layer(lname)
{
  if(document.getElementById) {
    document.getElementById(lname).style.visibility = 'hidden';
  } else if(document.layers) {
    document.layers[lname].visibility = 'hide'  
  } else if(document.all)
    document.all(lname).style.visibility = 'hidden'
}

function na_show_layer(lname)
{
  if (na_show_layer.arguments.length <= 1) { // don't delete, backword compatibility
    if(document.getElementById) {
      document.getElementById(lname).style.visibility = 'visible';
    } else if(document.layers) {
      document.layers[lname].visibility = 'show'  
    } else if(document.all)
      document.all(lname).style.visibility = 'visible'
  } else {
    if(document.getElementById) {
      document.getElementById(lname).style.visibility = 'hidden';
    } else if(document.layers) {
      document.layers[lname].visibility = 'hide'  
    } else if(document.all)
      document.all(lname).style.visibility = 'hidden'
  }
}

function na_init_layer_events()
{
  if (document.layers) {
    document.layers['layer1'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
    document.layers['layer1'].onmouseout = new Function("na_hide_layer('layer2');");
    document.layers['layer1'].onmouseover = new Function("na_show_layer('layer2');");
  }
}
// -->
</script>

</head>

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" OnLoad="na_init_layer_events();">

    <div id="layer1" style="background-color:blue; width:245px; height:26px; position:absolute; left:141px; top:13px; z-index:99; " OnMouseOut="na_hide_layer('layer2');" OnMouseOver="na_show_layer('layer2');">
        <p>&nbsp;&nbsp;<font color="white">마우스를 올려보세요</font></p>
    </div>
 <div id="layer2" style="background-color:lime; width:200px; height:233px; position:absolute; left:153px; top:21px; z-index:1; visibility:hidden;">
        <p>&nbsp;</p>
</div>
<br>
<br>
<br>

<div id="XXXXXXXXXX" style="width:300px; height:200; position:absolute; z-index:1;">
<form name="form1">
    <p><input type="text" name="formtext1" size="81" style="position:relative;"></p>
</form>
</div>


</body>
</html>
###################################################


id="XXXXXXXXXX"가 position속성이 없을때 나타나는 현상
##################################################

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>제목 없음</title>
<meta name="generator" content="Namo WebEditor v6.0">


<script language="JavaScript">
<!--
function na_hide_layer(lname)
{
  if(document.getElementById) {
    document.getElementById(lname).style.visibility = 'hidden';
  } else if(document.layers) {
    document.layers[lname].visibility = 'hide'  
  } else if(document.all)
    document.all(lname).style.visibility = 'hidden'
}

function na_show_layer(lname)
{
  if (na_show_layer.arguments.length <= 1) { // don't delete, backword compatibility
    if(document.getElementById) {
      document.getElementById(lname).style.visibility = 'visible';
    } else if(document.layers) {
      document.layers[lname].visibility = 'show'  
    } else if(document.all)
      document.all(lname).style.visibility = 'visible'
  } else {
    if(document.getElementById) {
      document.getElementById(lname).style.visibility = 'hidden';
    } else if(document.layers) {
      document.layers[lname].visibility = 'hide'  
    } else if(document.all)
      document.all(lname).style.visibility = 'hidden'
  }
}

function na_init_layer_events()
{
  if (document.layers) {
    document.layers['layer1'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
    document.layers['layer1'].onmouseout = new Function("na_hide_layer('layer2');");
    document.layers['layer1'].onmouseover = new Function("na_show_layer('layer2');");
  }
}
// -->
</script>

</head>

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" OnLoad="na_init_layer_events();">

    <div id="layer1" style="background-color:blue; width:245px; height:26px; position:absolute; left:141px; top:13px; z-index:99; " OnMouseOut="na_hide_layer('layer2');" OnMouseOver="na_show_layer('layer2');">
        <p>&nbsp;&nbsp;<font color="white">마우스를 올려보세요</font></p>
    </div>
 <div id="layer2" style="background-color:lime; width:200px; height:233px; position:absolute; left:153px; top:21px; z-index:1; visibility:hidden;">
        <p>&nbsp;</p>
</div>
<br>
<br>
<br>

<div id="XXXXXXXXXX" style="width:300px; height:200; z-index:1;">
<form name="form1">
    <p><input type="text" name="formtext1" size="81" style="position:relative;"></p>
</form>
</div>


</body>
</html>
##################################################

이 게시물을
Profile
좋아요
목록
글쓴이 제목 최종 글
XE 공지 글 쓰기,삭제 운영방식 변경 공지 [16] 2019.03.05 by 남기남
seojoohyun SQL 명령으로 광고 댓글을 삭제한 후 DB 값들을 정비할 수 있을까요? [1] 2009.01.28 by 미눙
osunwoo files 폴더 삭제 후 업로드 [2] 2009.01.28 by 샤이니라
최영석222 퍼미션 문제..  
seojoohyun DB 이전, 복구 과정에서 ''SQL 구문에 오류가 있습니다''랍니다.. [4] 2009.01.28 by seojoohyun
싴신 [XE] 혹시 이런 방식의 로그인 위젯은안되나요? [1] file 2009.01.27 by 알아서 뭐해?
dantes 페이지 오류라고 뜨는문제좀 해결해주세요 [2] file 2009.01.27 by dantes
윤성희480 xe blog 게시판 갤러리 형태에서 사이즈 큰 사진을 올리면...  
sky 각페이지 레이아웃 변경 [1] 2009.01.27 by e~세상쉼터
싴신 회원정보가 일반회원들한테도 다보여요. 어떻게 방법이?ㅠㅠ [1] 2009.01.27 by php,cgi어렵네
쿄우짱짱 홈페이지관련질문입니다. [2] 2009.01.27 by 백성찬
가을풍경 몇가지 의문점이 있어서 올립니다.  
skillmaker 제로보드1.1.5 패치하니 로고가 엑박뜹니다. [3] 2009.01.27 by 고광석
쿄우짱짱 상단메뉴에대한 질문입니다 [2] 2009.01.27 by 쿄우짱짱
글방내 게시판에 쓰기 등록이 안됩니다  
흑묘백묘 회원 메뉴 없애는 방법 좀 갈켜주세요.^-^ [2] file 2009.01.27 by 흑묘백묘
PaikYunki 웹진형태 최근문서출력 위제트에 more 아이콘을 추가하기 가능한가요?  
최소영329 관리자 로그인 로그아웃 화면 페이지는 어디에 있나요? [2] 2009.01.27 by 최소영329
최영석222 작업하는동안 처음화면 안보이게 [1] file 2009.01.27 by ㅁ
frerap 게시판에 업로드된 pdf파일 바로보기 [8] 2009.01.27 by 자반튀김
싴신 이런 로그인폼은 어디서 구하나요? XE는 이런거찾아봐도없던데 [1] file 2009.01.27 by 궁금이2
유샤인 제로보드만 글자가 아주 작게 전시된다고 알려 왔읍니다. [2] 2009.01.27 by 유샤인
B.G.M^^ position속성만 주면 input박스가 보이면서 레이어와 겹쳐보입니다... [2] 2009.01.27 by B.G.M^^
클리어 제로보드XE 1.0.5 버전인데요.. 메뉴가 300개 이상 생성이 안되네요.. [5] 2009.01.27 by 클리어
abby xe 기본 게시판에서 정렬순서들이 밀릴때 - css를 건든듯? [1] file 2009.01.27 by 시카고
홍태경v 게시판 New 뜨게하는방법좀요 ㅜ [1] 2009.01.27 by 시카고
김대호윤효숙 홈페이지가 깨지는데 뭐가 문제일까요? [6] file 2009.06.01 by 出会い系
샤릉해 폼값을 여러번 넘길때 [설문조사 사이트] 값 유지 방법 [2] 2009.01.27 by 샤릉해
소띠 font style을 같게 하고 싶은데 아무리 찾아봐도 모르겠어요. [2] file 2009.01.27 by 매실茶
투어리 확장자에 따른 if 문 [4] 2009.01.27 by 투어리
Aloneann 레이아웃을 적용해보았습니다.. 두번째 질문...^^;; [3] 2009.01.27 by 우유가짱
태그 쓰기