关于区域滚动与元素定位有关问题
日期：2014-05-16 浏览次数：20385 次
关于区域滚动与元素定位问题
1、目前结果是：当区域内滚动时，弹出框不动。
2、想要实现的结果是：当区域内滚动时，弹出框仍在对应的元素下面。
------解决方案--------------------
1、目前结果是：当区域内滚动时，弹出框不动。
2、想要实现的结果是：当区域内滚动时，弹出框仍在对应的元素下面。
- HTML code
<!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>
------解决方案--------------------
- HTML code
<!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
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
