87,910
社区成员
发帖
与我相关
我的任务
分享
<style type="text/css" media="screen">
.warp {position: relative;}
.warp .moderOne {position: absolute;z-index:1;width:200px;height:100px;background:#ddd;}
.warp .moderTwo {position: absolute;}
</style>
<body>
<div class="warp">
<from id='form1'><div id='div_location' class="moderOne">上面</div></form>
<div>
<form id='form2'>
<div id='div_location2' class="moderTwo"><input type='file' id='file_upload' name='file_upload' /></div>
</form>
</div>
</div><!-- / -->
</body>
</html>
<html>
<head>
<title>绝对定位</title>
<style>
#msg {
position: absolute;
width:200px;
height:150px;
border:3px solid blue;
padding: 5px 5px 5px 5px;
display:none;
color:red;
background-color:white;
}
body {
padding-left:100px;
padding-top:100px;
}
td {
width:80px;
height:80px;
}
</style>
<script src="jquery-1.2.6.pack.js"></script>
</head>
<body>
<div>
<table border="1">
<tbody>
<tr>
<td>Im's a TD11111</td>
<td>Im's a TD22222</td>
<td>Im's a TD33333</td>
<td>Im's a TD44444</td>
<td>Im's a TD55555</td>
<td>Im's a TD66666</td>
</tr>
<tr>
<td>Im's a TD77777</td>
<td>Im's a TD88888</td>
<td>Im's a TD99999</td>
<td>Im's a TD00000</td>
<td>Im's a TD12312</td>
<td>Im's a TD45645</td>
</tr>
<tr>
<td>Im's a TD78989</td>
<td>Im's a TD54743</td>
<td>Im's a TD24674</td>
<td>Im's a TD34579</td>
<td>Im's a TD23473</td>
<td>Im's a TDsfhu7</td>
</tr>
<tr>
<td>Im's a TD!</td>
<td>Im's a TD!</td>
<td>Im's a TD!</td>
<td>Im's a TD!</td>
<td>Im's a TD!</td>
<td>Im's a TD!</td>
</tr>
</tbody>
</table>
</div>
<div id="msg"></div>
</body>
<script>
$("td").bind('mouseover', function(){
var str = "<b>当前td的内容:" + $(this).html() + "<br>此处可以用于显示ajax从后台获取数据。</b>";
var right = $(this).get(0).getBoundingClientRect().right - 40;
var top = $(this).get(0).getBoundingClientRect().top + 40;
$("#msg").html(str).css({"left":right + "px","top": top + "px"}).show();
});
$("td").bind('mouseout', function(){
$("#msg").hide();
});
</script>
</html>