묻고답하기
position속성만 주면 input박스가 보이면서 레이어와 겹쳐보입니다...
2009.01.26 22:17
안녕하세요
어떻게 설명을 드려야할지 몰라서... 답답하네요...
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> <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> </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> <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> </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>
##################################################
