这段代码有些地方不懂,可以说明一下吗？,谢谢

这段代码有些地方不懂,<style type="text/css">
.tab{
position:relative;//这是相对定位,但我还是不太理解
}
.tabpage {
position:absolute;//这是绝对定位,也不理解
top:25px;//这个我知道,是边距
left:0px;//这个也是
height:125px;//高度
width:200px;//宽度
border:1px solid #ccc;//border是边框线,solid就不知道是什么
z-index:0;//层次顺序}
 .tabpage-body{
position:absolute;//绝对定位
top:4px;//边距
left:237px;//边距
background:#fff;//这个应该是页面背景
width:100%;height:100%;//宽度和高度
}
 .tabpage-header{
position:absolute;//绝对定位
top:-24px;//边距
display:block;//边距
width:50px;
background:#fff;
padding:3;//这个是什么意思
height:23px;
border:1px solid #ccc;//solid是什么意思
border-bottom:none;//border-bottom是什么意思,none是隐藏
margin:0;//这个是什么意思
cursor:default;//这个是什么意思
}
</style><script type="text/javascript">
function show(obj){//obj是形参
obj.parentNode.style.zIndex=show.z++;//这语句是什么意思
show.z=1;//这语句是什么意思</script>
</head><body>
<div class="tab">//引用tab类样式
  <div class="tabpage">//引用tabpage类样式
<h3 class="tabpage-header" style="left:0px" onmouseover="show(this)">tab1 </h3>
//引用tabpage-header类样式,用style设置左边距,鼠标触摸引发方法show实参this
</div>
<div class="tabpage">//引用tabpage类样式
<h3 class="tabpage-header" style="left:60px" onmouseover="show(this)">tab2 </h3>
//引用tabpage-header类样式,用style设置左边距,鼠标触摸引发方法show实参this </div>
<div class="tabpage">//引用tabpage类样式
<h3 class="tabpage-header" style="left:120px" onmouseover="show(this)">tab3 </h3>
//引用tabpage-header类样式,用style设置左边距,鼠标触摸引发方法show实参this</div></div>
</body>主要就是绝对定位和相对定位的理解,希望可以详细说明一下