网页的位置编程
网页做了这么久了，对与用javascript来操作网页的位置编程还是很陌生，因为以前总是抄点别人的程序，实现功能就可以，以后所有的 东西要全部自主知识产权了，无论如何自己也可以算得上是资深程序员了，呵呵。虽然技术不是很高，先查了一下msdn跟元素定位相关的属性和方法：
screenX Property：
Sets or retrieves the x - coordinate of the mouse pointer ' s position relative to the user ' s screen.
clientX Property
Sets or retrieves the x - coordinate of the mouse pointer ' s position relative to the client area of the window, excluding window decorations and scroll bars.Remarks
The property is read-only in Microsoft Internet Explorer 4.0, and read/write in Internet Explorer 5 and later.
Because the clientX property returns a value relative to the client, you can add the value of the scrollLeft property to determine the distance of the x-coordinate from the edge of the body element.
Within a viewlink, the client area begins at the edge of the master element.
offsetX Property
Sets or retrieves the x-coordinate of the mouse pointer ' s position relative to the object firing the event.
Remarks
The property is read - only in Microsoft Internet Explorer 4.0 , and read / write in Internet Explorer 5 and later.
The coordinates match the offsetLeft and offsetTop properties of the object. Use offsetParent to find the container object that defines this coordinate system.
Example
This example uses the offsetX property to determine the mouse position relative to the container that fired the event, and displays the mouse coordinates in the status bar at the bottom of the window.
< SCRIPT >
function offsetCoords()
{
var offsetInfo = ""
offsetInfo = " The x coordinate is: " + window.event.offsetX + " "
offsetInfo += " The y coordinate is: " + window.event.offsetY + " "
alert(offsetInfo);
}
</ SCRIPT >
</ HEAD >
< BODY onmousemove = " window.status = 'X=' + window.event.offsetX +
' Y=' + window.event.offsetY " ondblclick = " offsetCoords() " >
:
< DIV onclick = " offsetCoords(); " . . . position:absolute; top: 200 ;
left: 300 ; " >
:
</DIV>x PropertySets or retrieves the x-coordinate, in pixels, of the mouse pointer's position relative to a relatively positioned parent element.RemarksThe property is read-only in Microsoft Internet Explorer 4.0, and read/write in Internet Explorer 5 and later.In browser versions earlier than Internet Explorer 5, the x property retrieves a coordinate relative to the client.This property returns the x-coordinate of the closest relatively positioned parent element of the element that fires the event. If the event firing element is relatively positioned, then the x-coordinate from the boundary of the element is returned. If the event firing element and all of its parent elements are not relatively positioned, then the x property returns a coordinate relative to the body element.If the mouse is outside the window when the event is called, this property returns -1
Sets or retrieves the top position of the object.
window.screen.Width
window.screen.Height
2 、用window.document.body对象时
offsetWidth、offsetHeight IE工作区宽和高
clientWidth、clientHeight IE可见区宽和高
scrollWidth、scrollHeight IE水平滚动板宽度和垂直滚动板高度
screen.width、screen.height 屏幕的分辩率
3 、
用window.document.body对象时
offsetWidth、offsetHeight IE工作区宽和高
clientWidth、clientHeight IE可见区宽和高
scrollWidth、scrollHeight IE水平滚动板宽度和垂直滚动板高度
screen.width、screen.height 屏幕的分辩率
4 、top的值是String
pixelTop的值是Integer
5 、left (x),top (y)是带单位的值，pixelLeft,pixelTop是不带单位的值
屏幕的分辩率(单位是pixel):
screen.width
screen.height
screen.availWidth, screen.availHeight是指除去TASKBAR以外的长宽
6 、 pixeltop是相对于父层的
编程示例：
环境元素：页面中有一个输入框，本段代码通过没有该层存在而重新创建一个div元素然后附加到body中然后在去计算他的显示位置，通过循环计算父元素的offsetleft 和offsetTop来确定．
{
var newNode = document.createElement( " div " );
newNode.setAttribute( " id " , divID);
document.body.appendChild(newNode);
}
// globalDiv设置为div的引用
globalDiv = document.getElementById(divID);
// 计算div左上角的位置
var x = queryField.offsetLeft;
var y = queryField.offsetTop + queryField.offsetHeight;
var parent = queryField;
while (parent.offsetParent)
{
parent = parent.offsetParent;
x += parent.offsetLeft;
y += parent.offsetTop;
}
// 如果没有对div设置格式,则为其设置相应的显示样式
if ( ! divFormatted)
{
globalDiv.style.backgroundColor = DIV_BG_COLOR;
globalDiv.style.fontFamily = DIV_FONT;
globalDiv.style.padding = DIV_PADDING;
globalDiv.style.border = DIV_BORDER;
globalDiv.style.width = " 100px " ;
globalDiv.style.fontSize = " 90% " ;
globalDiv.style.position = " absolute " ;
globalDiv.style.left = x + " px " ;
globalDiv.style.top = y + " px " ;
globalDiv.style.visibility = " hidden " ;
globalDiv.style.zIndex = 10000 ;
divFormatted = true ;
}
clientHeight:内容可视区域的高度
offsetHeight:clientHeight + 滚动条 + 边框
scrollHeight:网页内容实际高度，可以小于 clientHeight
offsetParent:在msdn的解释是Retrieves a reference to the container object that defines the offsetTop and offsetLeft properties of the object.
parentElement: 在msdn的解释是Retrieves the parent object in the object hierarchy.
offsetLeft:
假设 obj 为某个 HTML 控件。
obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。
obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。
obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。
obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。
clientHeight 获取对象的高度，不计算任何边距、边框、滚动条，但包括该对象的补白。
clientLeft 获取 offsetLeft 属性和客户区域的实际左边之间的距离。
clientTop 获取 offsetTop 属性和客户区域的实际顶端之间的距离。
clientWidth 获取对象的宽度，不计算任何边距、边框、滚动条，但包括该对象的补白。
offsetHeight 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。
offsetLeft 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。
offsetParent 获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。
offsetTop 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置。
offsetWidth 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。
offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
offsetParent直接的将是影响元素位置的上级element，而parentElement与位置显示无关时dom中的上级element。
例如：
<BODY>
<div style="border: 1px solid black;position:absolute;">
<form>
<input type="checkbox" id="cc">
</form>
</div>
这个例子中，“cc”元素的offsetParent是div，如果去掉div的position属性，那么cc的offsetParent就会变为body。而parentElement一直都为form。
与此相关的还有offsetLeft和offsetTop两种属性，他们分别表示的是元素与offsetElement相对应的左侧和顶部距离。
parentNode和parentElement功能一样，childNodes和children功能一样。但是parentNode和childNodes是符合W3C标准的，可以说比较通用。而另外两个只是IE支持，不是标准，Firefox就不支持