如何控制一个浮动层在某一个标签的下方
例如:<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> <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>