关于区域滚动与元素定位问题
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><!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>