1、realtive：而相对定位是相对于同级元素的定位，也就是上一个同级元素
#redBox {
width: 200px;
height: 200px;
background: red;
position: realatIve;/*相对定位*/
}
我们看到灰色盒子相对于红色盒子同级元素top 50px，而不是绿色大盒子的顶部top 50px，更不是网页的top 50px
2、absolute：绝对定位就是相对于父元素的定位，不受父元素内其他子元素的影响；
#redBox {
width: 200px;
height: 200px;
background: red;
position: absolute;/*绝对定位*/
}
我可以看到如图，灰色的盒子距离其父类元素（绿色大盒子）的top为50px；而不是距离红色盒子的底部50px
3、z-index就是网页的z轴，用相对定位绝对定位把两个层重叠在一起，z-index的值越大，就越靠上
接下来我们来考虑一个问题：怎么吧步骤2中的红色盒子显现在上面二使灰色盒子在底部显现。（这个时候我们就可以使用z-index属性来对他们进行设置）
#redBox {
width: 200px;
height: 200px;
background: red;
position: absolute;
z-index: 2; /*红色盒子要在上面，所以设置为2（因为2>1）*/
}
#grayBox {
top: 100px;
width: 300px;
height: 100px;
background: gray;
position: absolute;
top: 50px;
z-index: 1;
}
