读书人

怎么控制一个浮动层在某一个标签的上方

发布时间: 2012-08-24 10:00:20 作者: rapoo

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

读书人网 >JavaScript

热点推荐