关于区域滚动与元素定位问题

1、目前结果是：当区域内滚动时，弹出框不动。
2、想要实现的结果是：当区域内滚动时，弹出框仍在对应的元素下面。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.6.4.min.js" type="text/javascript"></script>
<title>关于区域滚动与元素定位问题</title>
<style>
body{overflow: hidden;}
table{width:100%;border-collapse:collapse;}
td{border:1px solid #D4D4D4;}
.top{height:50px;}
.left{width:100%;}
.right{height:200px;overflow: auto;}
#open_div_id{cursor:pointer;color:red;}
#alert_div_id{display:none;border:1px solid #D4D4D4;background-color:yellow;}
</style>
<script>
function open_div()
{
$("#alert_div_id").css('display','block');
var obj = $("#open_div_id");
var x = obj.offset().left;
var y = obj.offset().top + obj.height();
var o_message = document.getElementById("alert_div_id");
o_message.style.left = x + "px";
o_message.style.top =  y + "px";
o_message.style.position='absolute';
o_message.style.display='block';
o_message.style.zIndex=99999;
}
</script>
</head>
<body>
<table>
<tr>
<td colspan="2"><div class="top">标题栏</div></td>
</tr>
<tr>
<td style="width:200px;"><div class="left">导航</div></td>
<td>
<div class="right">
<div>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/></div>
<div id="open_div_id" onclick="open_div();">单击此处弹出DIV</div>
<div>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/></div>
<div id="alert_div_id">我是弹出的DIV</div>
</div>
</td>
</tr>
</table>
</body>
</html>

解决方案 »

  1.   

    额？好像贴错地方了，应该是HMTL(CSS)那里的，唉！
      

  2.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <title>关于区域滚动与元素定位问题</title>
    <style>
    body{overflow: hidden;}
    table{width:100%;border-collapse:collapse;}
    td{border:1px solid #D4D4D4;}
    .top{height:50px;}
    .left{width:100%;}
    .right{height:200px;overflow: auto;position:relative;}
    #open_div_id{cursor:pointer;color:red;position:relative;}
    #alert_div_id{display:none;border:1px solid #D4D4D4;background-color:yellow;left:0;top:20px;}
    </style>
    <script>
    function open_div()
    {
        $("#alert_div_id").css('display','block');
        var obj = $("#open_div_id");
        var x = obj.offset().left;
        var y = obj.offset().top + obj.height();
        var o_message = document.getElementById("alert_div_id");    o_message.style.position='absolute';
        o_message.style.display='block';
        o_message.style.zIndex=99999;        
    }
    </script>
    </head>
    <body>
        <table>
            <tr>
                <td colspan="2"><div class="top">标题栏</div></td>
            </tr>
            <tr>
                <td style="width:200px;"><div class="left">导航</div></td>
                <td>
                    <div class="right">
                        <div>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/></div>
                        <div id="open_div_id" onclick="open_div();">
    单击此处弹出DIV
    <div id="alert_div_id">我是弹出的DIV</div>
    </div>
                        <div>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/></div>
                       
                    </div>
                </td>
            </tr>
        </table>
    </body>
    </html>
    试试
      

  3.   

     $("#alert_div_id").css('display','block');这里是什么意思 可以这样用吗??还是说$是自己写的函数??
      

  4.   

    1、为什么body滚动的时候，元素是固定在对应元素的位置？？？
    ——
    2、为什么在区域内滚动的时候，元素没有跟在对应元素走了？？？
    ——
    3、如何实现区域内滚动的时候，元素是固定在对应元素的位置？？？代码见帖子
    ——
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="jquery-1.6.4.min.js" type="text/javascript"></script>
    <title>关于区域滚动与元素定位问题</title>
    <style>
    body{overflow: auto;}
    #open_div_id{cursor:pointer;color:red;}
    #alert_div_id{display:none;border:1px solid #D4D4D4;background-color:yellow;}
    </style>
    <script>
    function open_div()
    {
        $("#alert_div_id").css('display','block');
        var obj = $("#open_div_id");
        var x = obj.offset().left;
        var y = obj.offset().top + obj.height();
        var o_message = document.getElementById("alert_div_id");
        o_message.style.left = x + "px";
        o_message.style.top =  y + "px";
        o_message.style.position='absolute';
        o_message.style.display='block';
        o_message.style.zIndex=99999;        
    }
    </script>
    </head>
    <body>    
        <div>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/></div>
        <div id="open_div_id" onclick="open_div();">单击此处弹出DIV</div>
        <div>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/></div>   
        <div>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/></div>
        <div>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/></div>
        <div>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/></div>
        <div>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/></div>
        <div id="alert_div_id">我是弹出的DIV</div>           
    </body>
    </html>