层的精确定位和飘动.

最新推荐文章于 2025-08-02 13:18:41 发布

原创最新推荐文章于 2025-08-02 13:18:41 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器 #function

工作文件夹专栏收录该内容

21 篇文章

订阅专栏

对于初学做网页的人，浏览器大小和显示器分辨率变化会导致层错位。可通过层相对于表格位置确定精确位置，在网页<head>中加入函数，在<body>标签处调用，使层保持与表格相对位置。还可在函数里加循环，实现层在网页里飘动。

刚开始学做网页的人，肯定会因为层的定位而烦恼，因为在网页中就算精确定义了层的坐标值，但在浏览器的大小改变、显示器的分辨率的不同都会引起层的错位。
我的办法是用层相对于表格位置来确定层的精确位置。因为表格的位置是固定的。
具体的做法是：
定义要定位的层的ID是udiv、定义固定表格的ID为tablebody。
在层所在的网页的<head></head>之间加入一个函数
<Script>
function reposition(){
udiv.style.posLeft =tablebody.offsetLeft+x;//定义层到页面最左端的距离，x为相对表格的偏移量
udiv.style.posTop=tablebody.offsetTop+y; //定义层到页面最定顶端的距离，Y为相对表格的偏移量
}
</Script>
最后在<body>标签处加入 onload="reposition();" onresize="reposition();"
意思是当浏览器读取网页和改变大小时调用reposition()函数。使层在什么时候都保持与表格的相对位置。
再深一步，如果我们在函数里加入循环，使层的左、上边距不断的变化，这样就可以作出在网页里飘动的层了。

收藏自:http://www.g-ya.cn/academy/academyFile/200410704423.asp