如何控制一个浮动层在某一个标签的下方

例如：<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这个层的下面，请大侠们指点一下！如何实现？ 得适应不同的浏览器和显示屏！

解决方案 »

  1.   

    这个 div_loaction2要放到 div_location的里面然后 #div_location{position:relative;}
    #div_location2{position:absolute;top:(div_lcation的高度)px;left:0;}
      

  2.   


    <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>
      

  3.   

    先谢谢大家了，大家也看到了，页面有两个form 第一个form里面还有很多标签！id=div_location只是在这些标签的中间一个而已！~ id=div_location2这个DIV是再页面最下面的！  我要把它定位到id=div_location下面的！  各位大侠~~、再想想招！~、   补充一下：我是想点击某一个按钮、然后div_location2才出现在div_location下面的！
      

  4.   

    使用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>
    楼主，记得把jquery的js包加上再运行看看噢