html中absolute、realative、z-index的简单分析

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;

}