div层显示坐标问题

Question

div 的position 设置为absolute处理window的onscroll事件。
在这个事件中，设置div的Top 、Left 。

Answer 1

div的top和left还得参考iframe的top和left来计算。

Answer 2

b.html<style type="text/css">
<!--
#Layer1 {
background:#CCCCCC;
position:absolute;
width:600px;
height:500px;
z-index:1;
left: 0px;
top: 0px;
}
-->
</style>
<script language="javascript">
<!--
function showdiv(){
var obj=document.getElementById("Layer1");
obj.style.display=(obj.style.display==""?"none":"");
if(obj.style.display=="")onwindowscroll();
}function onwindowscroll(){
var maxwidth=document.body.clientWidth;
var maxheight=document.body.clientHeight;
var offsetx=document.body.scrollLeft;
var offsety=document.body.scrollTop;
var obj=document.getElementById("Layer1");
//obj.style.left=(maxwidth-obj.style.width)/2+offsetx;
//obj.style.top=(maxheight-obj.style.height)/2+offsety;
obj.style.left=(maxwidth-600)/2+offsetx;
obj.style.top=(maxheight-500)/2+offsety;
}window.onscroll=onwindowscroll;
-->
</script>
<div id="Layer1" style="display:none;"></div>
<a href="javascript:showdiv()">Show Div</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><hr width="2000" />

Answer 3

看错了是屏幕1/3a.html
<iframe id="ifm" src="2.htm" width="800" height="800"></iframe>b.html
<style type="text/css">
<!--
#Layer1 {
background:#CCCCCC;
position:absolute;
width:200px;
height:200px;
z-index:1;
left: 0px;
top: 0px;
}
-->
</style>
<script language="javascript">
<!--
function showdiv(){
var obj=document.getElementById("Layer1");
obj.style.display=(obj.style.display==""?"none":"");
if(obj.style.display=="")onwindowscroll();
}function onwindowscroll(){
var maxwidth=window.parent.document.body.clientWidth;
var maxheight=window.parent.document.body.clientHeight;
var offsetx=document.body.scrollLeft;
var offsety=document.body.scrollTop;
var obj=document.getElementById("Layer1");
obj.style.left=(maxwidth-obj.offsetWidth)/2+offsetx;
obj.style.top=(maxheight-obj.offsetHeight)/2+offsety;
}window.onscroll=onwindowscroll;
-->
</script>
<div id="Layer1" style="display:none;"></div>
<a href="javascript:showdiv()">Show Div</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><hr width="2000" />

Answer 4

忘了处理父窗滚动条位置，这个函数修改成这样，但是父窗体的事件我不知道怎么传递到b.html
function onwindowscroll(){
var maxwidth=window.parent.document.body.clientWidth;
var maxheight=window.parent.document.body.clientHeight;
var offsetx=document.body.scrollLeft+window.parent.document.body.scrollLeft;
var offsety=document.body.scrollTop+window.parent.document.body.scrollTop;
var obj=document.getElementById("Layer1");
obj.style.left=(maxwidth-obj.offsetWidth)/2+offsetx;
obj.style.top=(maxheight-obj.offsetHeight)/2+offsety;
}

Answer 5

.dialog{
   background-color:#F1F1F1;
   position:absolute;
   width:300px;
   height:150px;
   top:40%;
   left:50%;
   margin:-75px 0 0 -150px;
   z-index:999;
}以上IE浏览器上通过。

Answer 6

设div.style.position='absolute';