<div> 를 select box 위에 넣기
페이지 정보
작성자 서방님 댓글 0건 조회 105회 작성일 06-10-23 15:13본문
IE의 버그? IE7부터는 이런 문제 없단다...
<DIV .. 가 SELECT 보다 순위가 낮아서 두개가 겹칠 때 SELECT가 위에 놓이게 된다..인터넷에서 뒤져서 몇가지 방법을 알았다..
1. <DIV 대신 <OBJECT를 사용하는 것..<OBJECT의 우선 순위가 SELECT보다 높다. 복잡한 페이지 보여줄 때 추천하지 않음.
2. 스크립트 함수를 만들어서 <DIV를 보여줄 때 SELECT를 숨기는 방법.
3. IFRAME을 DIV의 밑바닥에 까는 방법. DIV는 IFRAME보다 순위가 높고 IFRAME은 SELECT 보다 순위가 높아서 DIV 를 SELECT 위에 덮을 수 있다...
아래는 IFRAME 방식으로의 소스이다.
1.
-----------------------------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>简单菜单</title>
<!--
提供定位函数，用iframe作载体，不会被select挡住
By Fason(2003-5-21)
-->
<style id=s>
#div1{
position:absolute;
z-index:100;
width:100;
height:130;
background-color:#d2e8ff;
border:1 solid black;
}
div{cursor:hand;font-size:12px;}
a{text-decoration:none;color:red;font-size:12px}
</style>
</head>
<body>
<script>
function window.onload(){
var shtml=div1.innerHTML;
var ifm=document.createElement("<iframe frameborder=0 marginheight=0 marginwidth=0 hspace=0 vspace=0 scrolling=no></iframe>")
ifm.style.width=div1.offsetWidth
ifm.style.height=div1.offsetHeight
ifm.name=ifm.uniqueID
div1.innerHTML=""
div1.appendChild(ifm)
window.frames[ifm.name].document.write(s.outerHTML+"<body leftmargin=0 topmargin=0>"+shtml+"</body>")
}
function show(){
with(document.all.img1){
x=offsetLeft;
y=offsetTop;
objParent=offsetParent;
while(objParent.tagName.toUpperCase()!= "BODY"){
x+=objParent.offsetLeft;
y+=objParent.offsetTop;
objParent = objParent.offsetParent;
}
y+=offsetHeight-1
}
with(document.all.div1.style){
pixelLeft=x
pixelTop=y
visibility=''
}
}
function hide(){
document.all.div1.style.visibility='hidden'
}
</script>
<img id=img1 onmouseover="show()" onmouseout="hide()" src="ie.gif"><br>
<div id=div1 onmouseover="style.visibility=''" onmouseout="style.visibility='hidden'" style="visibility:hidden;">
<div href="http://www.csdn.net" onmouseover="style.backgroundColor='highlight'" onmouseout="style.backgroundColor=''" onclick="window.open(href)">test</div>
<div href="http://www.sohu.com" onmouseover="style.backgroundColor='highlight'" onmouseout="style.backgroundColor=''" onclick="window.open(href)">sohu</div>
shwo me the money
</div>
<select></select>
</body>
</html>
-----------------------------------------------------------------------
2. 좀 더 간단한 소스 -
-----------------------------------------------------------------------
<html>
<head><title></title>
</head>
<body>
<div style="z-index:10;position:absolute;width:100;height:18;overflow:hidden;" onmouseover="this.style.height=220;" onmouseout="this.style.height=18;">
<iframe style="position:absolute;z-index:-1;width:100%;height:100%;top:0;left:0;scrolling:no;" frameborder="0" src=""></iframe>
<div style="background-color:#cccccc;">aaaaaaa<br>bbbbbbb<br>ccccccc<br>ccccccc<br>ccccccc<br>ccccccc
<a href="aaa">news</a>
</div>
</div>
<select style="width:200" ><option>test0<option>test1<option>test2<option>test3</select>
</body>
</html>
-----------------------------------------------------------------------
여기서 iframe을 width, height를 지정할 때 값을 직접 주는것보다 아래와 같이 하는것이 좋다.
<iframe style="position:absolute;z-index:-1;width:expression(this.nextSibling.offsetWidth);height:expression(this.nextSibling.offsetHeight);top:expression(this.nextSibling.offsetTop);left:expression(this.nextSibling.offsetLeft);" frameborder="0" >';
DIV에서 중요한것이라면 층의 레벨을 보여주는 z-index 값이다. 값이 클 수록 위에 놓이게 된다.
댓글목록
등록된 댓글이 없습니다.
