怎么控制一个浮动层在某一个标签的上方
日期：2014-05-16 浏览次数：20320 次
如何控制一个浮动层在某一个标签的下方
例如：<html><title>测试浮动窗口</title><head></head><body><from id='form1'><div id='div_location'></div></form><div><form id='form2'><div id='div_location2'><input type='file' id='file_upload' name='file_upload' /></div></form></div></body></html>
我想把ID=div_location2这个层固定到id=div_location这个层的下面，请大侠们指点一下！如何实现？ 得适应不同的浏览器和显示屏！
------解决方案--------------------
使用js计算你的div_location的坐标啊。。。算出坐标就好办了嘛。。。直接绝对定位，设置left和top不就OK了嘛。。。
我给你看个我胡乱写的简单例子吧：
例如：<html><title>测试浮动窗口</title><head></head><body><from id='form1'><div id='div_location'></div></form><div><form id='form2'><div id='div_location2'><input type='file' id='file_upload' name='file_upload' /></div></form></div></body></html>
我想把ID=div_location2这个层固定到id=div_location这个层的下面，请大侠们指点一下！如何实现？ 得适应不同的浏览器和显示屏！
------解决方案--------------------
使用js计算你的div_location的坐标啊。。。算出坐标就好办了嘛。。。直接绝对定位，设置left和top不就OK了嘛。。。
我给你看个我胡乱写的简单例子吧：
- HTML code
<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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
