首先是页面定位，用CSS
position，这个下面有两个属性absolute(绝对定位)和relative(相对定位)，绝对定位是指相对浏览器的位置地位，而相对定位和其他元素的位置有关系，位置不固定。
以下可以看一个例子，看了之后就明白了
abc<br>
<div style="position:relative;left:1;top:100;color:green">absolute positioning with the current element<br><span style="position:absolute;left:0;top:0;">aaaaaaaaa</span></div>
<div style="color:red">absolute positioning with the body<br><span style="position:absolute;left:0;top:0">bbbbbbbbbbb</span></div>
<div style="color:blue">relative positioning with the body<span style="position:relative;left:-12;top:0">ccccccccccc</span></div>
而有些CSS属性有时候需用position:absolute 之后才有效，比如裁切的那个CSS等
接下来是一些元素的位置问题
就拿宽度来说
scrollwidth,clientwidth,offsetwidth
这些属性都可以用在<body>,<div>等元素
第一个是包括滚动条所有在内的长度，第二个和第三个差不多，第三个是包括工具栏，菜单栏，状态栏，滚动条宽度等在内的宽度，而第二个是去掉一些cellpadding等一些的额外的宽度。高度同这个，元素分别为
scrollheight,clientheight,offsetheight
接下来是鼠标的位置
可以用event.clientX + document.body.scrollLeft得到横的绝对位置
这里面event.clientX 是相对屏幕的位置，而document.body.scrollLeft是网页被横向滚动条卷进去的宽度。
这里可以看一个例子，代码如下 把这个方法写在<body>的onmousemove中，一目了然了。
<SCRIPT>
<!--
function statusreport() {
var tempx = event.clientX + document.body.scrollLeft;
var tempy = event.clientY + document.body.scrollTop;
window.status='在整个页面中的X, Y坐标 : ('+tempx+', '+tempy+') ; 在当前窗口中的X, Y坐标 : ( '+event.clientX+', '+event.clientY +')';
}
//-->
</SCRIPT>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
