1、区域内的定位,滚动时,弹出框不随定位值而定。
2、body内的定位,滚动时,弹出框定。期望用区域实现body的这种弹出框固定在定位值的地方。
<!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="http://code.jquery.com/jquery-latest.js"></script>
<title>关于区域滚动与元素定位问题</title>
<style>
body{overflow: auto;}
table{width:100%;border-collapse:collapse;}
td{border:1px solid #D4D4D4;}
.top{height:50px;}
.left{width:100%;}
.right{height:200px;overflow: auto;}
.color{cursor:pointer;color:red;}
.alert{display:none;border:1px solid #D4D4D4;background-color:yellow;}
</style>
<script>
function open_div(nums)
{
    $("#alert_div_id_"+nums).css('display','block');
    var obj = $("#open_div_id_"+nums);
    var x = obj.offset().left;
    var y = obj.offset().top + obj.height();
    var o_message = document.getElementById("alert_div_id_"+nums);
    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;    
    $("#alert_div_id_"+nums).html("我是弹出的DIV_"+nums+"<br/>我是弹出的DIV_"+nums+"<br/>");    
}
</script>
</head>
<body>
<div style="background-color:#FDF5E6;">
    <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/></div>
                    <div id="open_div_id_1" onclick="open_div(1);" class="color">单击此处弹出DIV_1</div>
                    <div>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/></div>
                    <div id="alert_div_id_1" class="alert"></div>
                </div>
            </td>
        </tr>
    </table>
    </div>
    <div>&nbsp;</div>
    <div>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/></div>
     <div id="open_div_id_2" onclick="open_div(2);" class="color">单击此处弹出DIV_2</div>
    <div>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/></div>
    <div>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/></div>
     <div id="alert_div_id_2" class="alert"></div>
</body>
</html>