<html>
<head>
<meta http-equiv="content-type" content="text/htmlcharset=GB2312" />
<title>CSS和Js演示网页绝对定位与相对定位</title>
<!-- 通用样式表 -->
<style>
* { font-size:12pxfont-family:宋体, Arial} /*规定了所有的字体样式*/
body { overflow:autoborder-style:nonemargin:0pxpadding:0px}
.tools { position:absolutetop:180pxleft:10px}
#abs { position:absoluteleft:10pxtop:10pxwidth:150pxheight:150pxbackground-color:buttonfacepadding:10px}
#rel { position:relativeleft:170pxtop:40pxwidth:150pxheight:120pxbackground-color:buttonfacepadding:10px}
</style>
<script>
function logEvent(){
$("ipt_x").value = event.x
$("ipt_y").value = event.y
$("ipt_x2").value = event.clientX
$("ipt_y2").value = event.clientY
}
function $(str){ return(document.getElementById(str))}
window.onload = function(){
document.onmousemove = logEvent
}
</script>
</head>
<body>
<div id="abs">绝对定位</div>
<div id="rel">相对定位</div>
<div class="tools">
event.x <input id="ipt_x" size="15" >
event.y <input id="ipt_y" size="15" >
<br/>
event.clientX <input id="ipt_x2" size="9" >
event.clientY <input id="ipt_y2" size="9" >
</div>
</body>
</html>
document.write是不能放到事件函数中执行的，否则整个页面的文档流会被重新改写，这样你放在head中div{position: absolute}就自动消失了，所以定位效果就无效了。你在浏览器控制台看一下就明白了（整个head段是空的）。应该直接操作dom对象来实现你的目的，即把
document.write(div)
改为
document.body.innerHTML=div
就OK了
绝对定位是相对于父标签决定位置，一般用于相对定位标签里面，JS特效经常用到。相对定位是相对于上一个相对定位的。一般用于浮动定位标签里面，一般跟绝对定位配合使用。
浮动定位才是常用的。
看例子：
<body>
<div
id="bq1"
style="
position:absolute
left:10px
top:10px
"></div>
<div
id="bq2"
style="
position:relative"></div>
<div
id="bq3"
style="
position:relative">
<div
id="bq4"
style="
position:absolute
left:10px
top:10px"></div>
</div>
</body>
以下只说id名代表div
绝对定位：position:absolute
如果bq1（绝对定位）外面没有div等父标签，bq1会以body为父标签。左边距距body
10像素，上边距距body
10像素。
如果bq4（绝对定位）在bq3（相对定位）里面，左边距距bq3
10像素，上边距距bq3
10像素。
相对定位：position:relative
bq2（相对定位)总是相对于前面的同级标签为基准标签（bq1）。
bq3以bq2为基准标签。
