之前老弄不明白，只能凭借一点短期内“虐出来的经验”制作需要的效果，后来仔细研究了一下Hutia的XScroller，并且仔细看了文档，才知道这个position属性其实是指本体对上级的定位。如果这么理解，就好办了。
默认的属性值都是static，静态。就不用多说了。最关键的是
relative（相对）以及absolute（绝对）。
往往我们如果是COPY别人的代码，会把absolute属性与left、top配合起来制作相关的“悬浮层”效果。然而有时候我们需要针对某一个容器的悬浮效果，而不是针对窗口的。这时候通过高度、宽度的计算不但麻烦，而且几乎无法完美实现效果。我一开始也无能为力，后来发现只要把其上一级的样式属性 position设置为relative就可以了。
也就是说，position的属性值的效果，直接受其容器样式中position属性值影响。
例如如下A-B的嵌套结构
<div id="A">
<div id="B">
</div>
</div>
当A的position为relative时，B的position为absolute才有效。这时候left:0、top:0就不再针对窗口文档，而是针对id为A的这个div了。
这样在开发一些基于B/S应用程序的时候，就能很方便的添加一些UI元素，例如某一个活动层的关闭按钮等。
测试代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style>
.Menu{
900px;
}
.Menu a{
display:inline;100px;vertical-align:middle; text-align:center;display:block; float:left;z-index:9999;
}
.MenuBar{
height:20px;background-color:blue; 500px;position: relative;top:20px;z-index:-1;left:0px;900px;
}
.Menu a:hover{
background-color:Red;verflow:hidden;height:40px; z-index:9999;
}
</style>
</head>
<body>
<center>
<div style=" 900px; height: 40px; position: relative">
<div class="Menu" style="height: 20px;">
<a href="http://www.my400800.cn">400电话</a> <a href="http://www.my400800.cn/400YeWuJianJie.aspx">400电话简介</a> <a href="http://www.my400800.cn/400ZiFeiBiaoZhun.aspx">400电话资费</a> <a href="http://www.my400800.cn/400DianHuaShenQingLiuChengJiGaiNian.html">400电话申请流程</a> <a href="http://www.my400800.cn/LianXiWoMen.html">联系我们</a>
</div>
<div class="MenuBar" style="position: absolute">
</div>
</div>
<div style=" 900px;">
正文内容测试
</div>
</center>
</body>
</html>
显示效果如下：
< type="text/javascript">