묻고답하기

  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 남기남
탑심 글 작성시 글 제목 나오는 폼 길이 문의 [2] file 2009.01.27 by 탑심
청춘개똥 플래닛 이거 정말 어렵네요. [1] 2009.01.27 by 멜로♡
Angeleyes 답변형 게시판에 대해서.. [1] 2009.01.27 by 멜로♡
HaMel 1.1.5 업데이트 한후 본문 이미지 애드온? 해결법 있나요?ㅜㅜ [4] 2009.01.27 by 멜로♡
별을향해 제로보드에서 통합검색에 대해서 알려주세요 ㅠ.ㅠ [2] 2009.01.27 by 별을향해
ceb* 질문입니다.. [2] 2009.01.27 by HwangTi
별을향해 DB에서 한글을 입력하면 깨집니다....  
김선의873 이미지 정렬 관련 질문입니다. [1] file 2009.01.27 by 우유가짱
Aloneann 레이아웃을 적용해보았습니다.. 두번째 질문...^^;; [3] 2009.01.27 by 우유가짱
투어리 확장자에 따른 if 문 [4] 2009.01.27 by 투어리
소띠 font style을 같게 하고 싶은데 아무리 찾아봐도 모르겠어요. [2] file 2009.01.27 by 매실茶
샤릉해 폼값을 여러번 넘길때 [설문조사 사이트] 값 유지 방법 [2] 2009.01.27 by 샤릉해
김대호윤효숙 홈페이지가 깨지는데 뭐가 문제일까요? [6] file 2009.06.01 by 出会い系
홍태경v 게시판 New 뜨게하는방법좀요 ㅜ [1] 2009.01.27 by 시카고
abby xe 기본 게시판에서 정렬순서들이 밀릴때 - css를 건든듯? [1] file 2009.01.27 by 시카고
클리어 제로보드XE 1.0.5 버전인데요.. 메뉴가 300개 이상 생성이 안되네요.. [5] 2009.01.27 by 클리어
B.G.M^^ position속성만 주면 input박스가 보이면서 레이어와 겹쳐보입니다... [2] 2009.01.27 by B.G.M^^
유샤인 제로보드만 글자가 아주 작게 전시된다고 알려 왔읍니다. [2] 2009.01.27 by 유샤인
싴신 이런 로그인폼은 어디서 구하나요? XE는 이런거찾아봐도없던데 [1] file 2009.01.27 by 궁금이2
frerap 게시판에 업로드된 pdf파일 바로보기 [8] 2009.01.27 by 자반튀김
최영석222 작업하는동안 처음화면 안보이게 [1] file 2009.01.27 by ㅁ
최소영329 관리자 로그인 로그아웃 화면 페이지는 어디에 있나요? [2] 2009.01.27 by 최소영329
PaikYunki 웹진형태 최근문서출력 위제트에 more 아이콘을 추가하기 가능한가요?  
흑묘백묘 회원 메뉴 없애는 방법 좀 갈켜주세요.^-^ [2] file 2009.01.27 by 흑묘백묘
글방내 게시판에 쓰기 등록이 안됩니다  
쿄우짱짱 상단메뉴에대한 질문입니다 [2] 2009.01.27 by 쿄우짱짱
skillmaker 제로보드1.1.5 패치하니 로고가 엑박뜹니다. [3] 2009.01.27 by 고광석
가을풍경 몇가지 의문점이 있어서 올립니다.  
쿄우짱짱 홈페이지관련질문입니다. [2] 2009.01.27 by 백성찬
싴신 회원정보가 일반회원들한테도 다보여요. 어떻게 방법이?ㅠㅠ [1] 2009.01.27 by php,cgi어렵네
태그 쓰기